如何使div全屏？
如何使div全屏？
提问于 2011-08-20 15:19:41
我正在使用Flot来绘制我的一些数据，我在想，只要点击一个按钮，就能让这个图形全屏显示(占据显示器上的全部空间)，那就太好了。目前，我的div如下：
<div id="placeholder" style="width:800px;height:600px"></div>当然，style属性仅用于测试。在实际设计过程中，我将把它移到CSS。有没有什么办法可以让这个div全屏显示，同时仍然保留所有的事件处理？
回答 10
Stack Overflow用户
回答已采纳
发布于 2011-08-20 15:26:53
当你说“全屏”时，你是指计算机的全屏，还是指占据浏览器中的整个空间？
您不能强制用户进入全屏F11；但是，您可以使用以下CSS使您的div全屏
div {width: 100%; height: 100%;}当然，这将假设您的div是<body>标记的子级。否则，除了上面的代码之外，还需要添加以下代码。
div {position: absolute; top: 0; left: 0;}Stack Overflow用户
发布于 2015-08-19 23:51:49
你可以使用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>
还请注意，Fullscreen API for Chrome在非安全页面中不起作用。有关更多详细信息，请参阅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;
}Stack Overflow用户
发布于 2011-08-20 15:36:17
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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7130397
复制相关文章
相似问题
腾讯云开发者
