Как сделать полный экран div?

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

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

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

Ответ 1

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

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

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

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

div {position: absolute; top: 0; left: 0;}

Ответ 2

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

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

Вот кнопка, которая делает 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>

Ответ 3

CSS-способ:

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

JS путь:

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

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

    abso();
});

Ответ 4

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

div#placeholder {
    height: 100vh;
}

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

Таблица поддержки браузеров: http://caniuse.com/viewport-units

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

Ответ 5

.widget-HomePageSlider .slider-loader-hide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: white;
}

Ответ 6

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

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

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

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

или

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

$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());

Ответ 7

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

CSS часть

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

Часть JQuery

$(document).ready(function() {
   $('#foo').css({
       width: $(document).width(),
       height: $(document).height()
   });
});

Ответ 8

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

#divid {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

Ответ 9

<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>

Ответ 10

Можно использовать API FullScreen, как это

function toggleFullscreen() {
  let elem = document.querySelector('#demo-video');

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch(err => {
      alert('Error attempting to enable full-screen mode: ${err.message} (${err.name})');
    });
  } else {
    document.exitFullscreen();
  }
}

Demo

const elem = document.querySelector('#park-pic');

elem.addEventListener("click", function(e) {
  toggleFullScreen();
}, false);

function toggleFullScreen() {

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch(err => {
      alert('Error attempting to enable full-screen mode: ${err.message} (${err.name})');
    });
  } else {
    document.exitFullscreen();
  }
}

#container{
  border:1px solid #aaa;
  padding:10px;
}
#park-pic {
  width: 100%;
  max-height: 70vh;
}

<div id="container">
  <p>
    <a href="#" id="toggle-fullscreen">Toggle Fullscreen</a>
  </p>
  <img id="park-pic"
      src="https://storage.coverr.co/posters/Skate-park"></video>
</div>