我正在使用Flot对我的一些数据进行图形化处理，并且我认为使该图形在单击按钮时全屏显示（在监视器上占据完整空间）会很棒。目前，我div的如下：
<div id="placeholder" style="width:800px;height:600px"></div>
当然，style属性仅用于测试。CSS在实际设计期间，我将其移至之后。无论如何，我可以使该div全屏显示，并且仍然保留所有事件处理吗？
Answers:
当您说“全屏”时，是指计算机全屏显示，还是占据浏览器的整个空间？
您不能强迫用户进入全屏模式F11；但是，您可以使用以下CSS将div全屏显示
div {width: 100%; height: 100%;}
当然，这将假定您的div是该<body>标签的子级。否则，除了上面的代码外，您还需要添加以下内容。
div {position: absolute; top: 0; left: 0;}
您可以为此使用HTML5全屏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的Fullscreen 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;
}
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();
});
div，然后将其应用到此样式，它的子元素将继续按先前的要求工作！干杯!
{position:absolute; top:0; right:0; bottom:0; left:0;}现在效果很好。谢谢！
对于全屏浏览器渲染区域，所有现代浏览器都支持一种简单的解决方案。
div#placeholder {
height: 100vh;
}
唯一值得注意的例外是低于4.3的Android-但仅在系统浏览器/网络视图元素中有效（Chrome可以正常运行）。
浏览器支持图表：http : //caniuse.com/viewport-units
对于全屏显示器，请使用HTML5全屏API
可以像这样使用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>
div {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}