Как мне сделать div на весь экран? - PullRequest
Новая
       12

Как мне сделать div на весь экран?

48 голосов
/ 20 августа 2011

Я использую Flot , чтобы отобразить некоторые из моих данных, и я подумал, что было бы здорово сделать этот график полноэкранным (занимать все пространство на мониторе) после нажатия на кнопку.В настоящее время мой div выглядит следующим образом: 

<div id="placeholder" style="width:800px;height:600px"></div>

Конечно, атрибут style предназначен только для тестирования.Я переместу это к CSS после во время фактического проекта.Можно ли как-нибудь сделать этот div полноэкранным и при этом сохранить всю обработку событий?

Ответы [ 9 ]

71 голосов
/ 19 августа 2015

Для этого вы можете использовать полноэкранный API HTML5 (я думаю, это наиболее подходящий способ).

Полноэкранный режим должен запускаться через пользовательское событие (щелчок, нажатие клавиши), иначе оно не будет работать.

Вот кнопка, которая делает div полноэкранным по щелчку. А в полноэкранном режиме нажатие кнопки приведет к выходу из полноэкранного режима. 

$('#toggle_fullscreen').on('click', function(){
  // if already full screen; exit
  // else go fullscreen
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    element = $('#container').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
});
#container{
  border:1px solid red;
  border-radius: .5em;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p>
    <a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
  </p>
  I will be fullscreen, yay!
</div>

Обратите внимание, что полноэкранный API для Chrome не работает на незащищенных страницах. Подробнее см. https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins.

Еще одна вещь, которую стоит отметить: полноэкранный селектор CSS. Вы можете добавить это к любому селектору CSS, так что правила будут применяться, когда этот элемент является полноэкранным: 

#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }
70 голосов
/ 20 августа 2011

Когда вы говорите «полный экран», вы имеете в виду полный экран для компьютера или для того, чтобы занимать все пространство в браузере?

Вы не можете заставить пользователя работать в полноэкранном режиме F11; тем не менее, вы можете сделать ваш div в полноэкранном режиме, используя следующий CSS 

div {width: 100%; height: 100%;}

Это, конечно, предполагает, что ваш div является потомком тега <body>. В противном случае вам потребуется добавить следующее в дополнение к приведенному выше коду. 

div {position: absolute; top: 0; left: 0;}
22 голосов
/ 20 августа 2011

CSS путь: 

#foo {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

JS way: 

$(function() {
    function abso() {
        $('#foo').css({
            position: 'absolute',
            width: $(window).width(),
            height: $(window).height()
        });
    }

    $(window).resize(function() {
        abso();         
    });

    abso();
});
17 голосов
/ 22 мая 2014

Для полноэкранного отображения области браузера есть простое решение, поддерживаемое всеми современными браузерами. 

div#placeholder {
    height: 100vh;
}

Единственное заметное исключение - Android ниже 4.3 - но только в системном браузере / элементе webview (Chrome работает нормально).

Диаграмма поддержки браузера: http://caniuse.com/viewport-units

Для полноэкранного режима монитора используйте HTML5 Fullscreen API

10 голосов
/ 08 июля 2014 
.widget-HomePageSlider .slider-loader-hide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: white;
}
3 голосов
/ 20 августа 2011

вы можете попробовать это .. 

<div id="placeholder" style="width:auto;height:auto"></div>

ширина и высота зависят от вашего флот или графика ..

надеюсь, ты хочешь этого ...

или

Нажав, вы можете использовать это по jquery 

$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
2 голосов
/ 29 мая 2013

Используйте высоту документа, если хотите показать его за пределами видимой области браузера (прокручиваемой области).

CSS часть 

#foo {
    position:absolute;
    top:0;
    left:0;
}

JQuery Portion 

$(document).ready(function() {
   $('#foo').css({
       width: $(document).width(),
       height: $(document).height()
   });
});
1 голос
/ 04 декабря 2014

Это самый простой. 

#divid {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
0 голосов
/ 11 августа 2016 
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
...