Javascript 如何使div全屏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7130397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a div full screen?
提问by Legend
I am using Flotto graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my divis as follows:
我正在使用Flot来绘制我的一些数据的图形，我认为在单击按钮时使该图形全屏显示（占据显示器上的全部空间）会很棒。目前，我的div情况如下：
<div id="placeholder" style="width:800px;height:600px"></div>
Of course, the style attribute is only for testing. I will move this to CSSafter during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?
当然，style 属性仅用于测试。我将CSS在实际设计期间将其移至之后。无论如何我可以让这个 div 全屏显示并仍然保留所有事件处理吗？
回答by 1.44mb
You can use HTML5 Fullscreen API for this (which is the most suitable way i think).
您可以为此使用 HTML5 Fullscreen API（这是我认为最合适的方式）。
The fullscreen has to be triggered via a user event (click, keypress) otherwise it won't work.
全屏必须通过用户事件（点击、按键）触发，否则将无法工作。
Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode.
这是一个按钮，可在单击时使 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>Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-originsfor more details.
另请注意，Chrome 的 Fullscreen API 不适用于非安全页面。有关更多详细信息，请参阅https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins。
Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:
另一件需要注意的事情是 :fullscreen CSS 选择器。您可以将其附加到任何 css 选择器，以便在该元素全屏时应用规则：
#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
width: 100vw;
height: 100vh;
}
回答by 1.44mb
When you say "full-screen", do you mean like full-screen for the computer, or for taking up the entire space in the browser?
当你说“全屏”时，你的意思是像计算机全屏，还是占据浏览器的整个空间？
You can't force the user into full-screen F11; however, you can make your div full screen by using the following CSS
你不能强迫用户全屏F11；但是，您可以使用以下 CSS 使您的 div 全屏显示
div {width: 100%; height: 100%;}
This will of course assume your div is child of the <body>tag. Otherwise, you'd need to add the following in addition to the above code.
这当然会假设您的 div 是<body>标签的子级。否则，除了上述代码之外，您还需要添加以下内容。
div {position: absolute; top: 0; left: 0;}
回答by daryl
CSS way:
CSS方式：
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS way:
JS方式：
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
回答by Tomek Kobyliński
For fullscreen of browser rendering area there is a simple solution supported by all modern browsers.
对于浏览器渲染区域的全屏，所有现代浏览器都支持一个简单的解决方案。
div#placeholder {
height: 100vh;
}
The only notable exception is the Android below 4.3 - but ofc only in the system browser/webview element (Chrome works ok).
唯一值得注意的例外是低于 4.3 的 Android - 但仅在系统浏览器/webview 元素中（Chrome 工作正常）。
Browser support chart: http://caniuse.com/viewport-units
浏览器支持图表：http: //caniuse.com/viewport-units
For fullscreen of monitor please use HTML5 Fullscreen API
对于全屏显示器，请使用 HTML5 Fullscreen API
回答by Denis
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
回答by Wahid4sap
u can try this..
你可以试试这个..
<div id="placeholder" style="width:auto;height:auto"></div>
width and height depends on your flot or graph..
宽度和高度取决于您的浮图或图形..
hope u want this...
希望你想要这个...
or
或者
By clicking, u can use this by jquery
通过单击，您可以通过 jquery 使用它
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
回答by Dasun
Use document height if you want to show it beyond the visible area of browser(scrollable area).
如果您想将其显示在浏览器可见区域（可滚动区域）之外，请使用文档高度。
CSS Portion
CSS 部分
#foo {
position:absolute;
top:0;
left:0;
}
JQuery Portion
jQuery 部分
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
回答by naveen
Can use FullScreen API like this
可以像这样使用 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();
}
}
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>回答by Varadha31590
This is the simplest one.
这是最简单的一种。
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
回答by Aaron
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
