如何让div全屏显示？

我在用Flot http://people.iola.dk/olau/flot/examples/绘制我的一些数据的图表，我想在单击按钮时使该图表显示全屏（占据显示器上的整个空间）会很棒。目前，我的div如下：

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

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

您可以使用 HTML5 Fullscreen API 来实现此目的（这是我认为最合适的方式）。

全屏必须通过用户事件（单击、按键）触发，否则将无法工作。

这是一个按钮，单击后可使 div 全屏显示。在全屏模式下，单击按钮将退出全屏模式。

$('#toggle_fullscreen').on('click', function(){
  // if already full screen; exit
  // else go fullscreen
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    $('#container').get(0).requestFullscreen();
  }
});

#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 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins更多细节。

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

#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }