Javascript 将 div 扩展到全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28590661/
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
Expand a div to full screen
提问by LargeTuna
I am using bootstrap 3 and jQuery. I have a div on my page right now that is 500 x 400 and it is sitting inside of a bootstrap row and col div. for example:
我正在使用引导程序 3 和 jQuery。我的页面上现在有一个 500 x 400 的 div，它位于引导行和 col div 内。例如：
<div class="row">
<div class="col-lg-12">
<div id="myDiv"></div>
</div>
</div>
I want to use jQuery to tell this div to go full screen. When I click on my button to make it go full screen it seems to be locked inside of the bootstrap row and goes to 100% x 100% inside of the parent div. Is there anyway to tell #myDiv to eject from the parent that it is in and go full screen.
我想使用 jQuery 告诉这个 div 全屏显示。当我点击我的按钮使其全屏显示时，它似乎被锁定在引导行内，并在父 div 内达到 100% x 100%。无论如何要告诉#myDiv 从它所在的父级中弹出并全屏显示。
My css:
我的CSS：
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
回答by Ted
See this demo fiddle
看到这个演示小提琴
CSS
CSS
#myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#myDiv{background:#cc0000; width:500px; height:400px;}
HTML
HTML
<div class="row">
<div class="col-lg-12">
<div id="myDiv">
my div
<button>Full Screen</button>
</div>
</div>
JS:
JS：
$('button').click(function(e){
$('#myDiv').toggleClass('fullscreen');
});
The trick is in setting position:fixed, by toggling the .fullscreenclass. This takes it outside of the normal dom tree, so to speak, and sizes/positions it relative to the window.
诀窍在于设置position:fixed，通过切换.fullscreen类。可以这么说，这会将它移到正常的 dom 树之外，并相对于窗口调整其大小/位置。
HTH, -Ted
HTH, -Ted
回答by Dhruv Ramani
JQuery
查询
$('#button').click(function(){
$('#myDiv').css({"top":"0","bottom":"0","left":"0","right":"0"});
});
CSS
CSS
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
There is a little error in your css. Change the .to #.
你的css有一点错误。将 更改.为#。
