Html 如何使div覆盖整个屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37295191/
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 to make a div cover the whole screen
提问by Kevin
I have a question.
我有个问题。
I got this so far:
到目前为止我得到了这个：
I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is highlighted. How do I achieve this?
无论设备屏幕有多大，我基本上都希望突出显示的 div 覆盖您的设备屏幕。现在，当我在手机上打开它时，我看到了 2 个不同的 div。我只想看到突出显示的那个。我如何实现这一目标？
Thanks in advance, kevin
提前致谢，凯文
回答by David Wilkinson
You could use viewport height as your height value:
您可以使用视口高度作为高度值：
.main {
height: 100vh;
background-color: green;
}<div class="main">
CONTENT
</div>Using height: 100vh means the element in question always be 100% height of the viewport a user / devie has.
使用 height: 100vh 意味着有问题的元素始终是用户/设备拥有的视口的 100% 高度。
More info: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
更多信息：https: //web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
回答by saugandh k
You can probably do that by setting the position of the div that you want to make fullscreen, to absoluteand then apply the below CSS.
您可以通过设置要全屏显示的 div 的位置来实现，absolute然后应用以下 CSS。
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
Thus, the final css would be as follows
因此，最终的 css 将如下所示
.fullscreen{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
}
回答by Advaith
You can use position: absolute;or position: fixed.
Use absolutefor just making it cover the whole page.
Use fixedto make it nailed in a default position. If u use fixed, even though your page is more than 100% you cannot scroll down to see any other things.
CSS
您可以使用position: absolute;或position: fixed。
使用absolute的只是使其覆盖整个页面。
使用fixed，使其在默认位置钉。如果fixed您使用，即使您的页面超过 100%，您也无法向下滚动查看任何其他内容。
CSS
div.any {
position: absolute; /*position: fixed;*/
top: 0;
left: 0;
width: 100%;
height: 100%;
/*You can add anything else to this like image, background-color, etc.*/
}
HTML
HTML
<div class="any"></div>
回答by Abhishek Meharia
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
