如何使div全屏？

Question

我正在使用Flot 绘制我的一些数据的图表，我认为在单击按钮时让此图表显示为全屏（占用监视器上的全部空间）会很棒。目前我的div如下：

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

当然，style 属性仅用于测试。在实际设计之后，我会将其移至CSS。无论如何我可以让这个 div 全屏并仍然保留所有事件处理吗？

Answer 1

可以像这样使用 FullScreen API

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();
  }
}

演示

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>

P.S：现在使用screenfull.js。一个用于跨浏览器使用 JavaScript Fullscreen API 的简单包装器。

Answer 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>

另请注意，Chrome 的全屏 API 不适用于非安全页面。详情请见https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins。

另外需要注意的是 :fullscreen CSS 选择器。您可以将其附加到任何 css 选择器，以便在该元素全屏时应用规则：

#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }

Answer 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();
});

Answer 4

这是最简单的一个。

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

Answer 5

如果您想在浏览器的可见区域（可滚动区域）之外显示它，请使用文档高度。

CSS 部分

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

jQuery部分

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

Answer 6

对于浏览器渲染区域的全屏，有一个所有现代浏览器都支持的简单解决方案。

div#placeholder {
    height: 100vh;
}

唯一值得注意的例外是低于 4.3 的 Android - 但仅在系统浏览器/webview 元素中（Chrome 工作正常）。

浏览器支持图表：http://caniuse.com/viewport-units

显示器的全屏请使用 HTML5 Fullscreen API

Answer 7

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

Answer 8

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

Answer 9

你可以试试这个..

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

宽度和高度取决于您的浮动或图形..

希望你想要这个...

或

通过点击，你可以通过jquery使用它

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

Answer 10

当您说“全屏”时，您是指计算机全屏还是占据浏览器中的整个空间？

你不能强制用户进入全屏F11；但是，您可以使用以下 CSS 使您的 div 全屏显示

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

这当然会假设您的 div 是 <body> 标记的子级。否则，除了上述代码之外，您还需要添加以下内容。

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