如何使div覆盖整个屏幕

Question

我有个问题。

到目前为止，我得到了：

我基本上希望突出显示的div可以覆盖设备屏幕，无论设备屏幕有多大。 现在，当我在手机上打开它时，我会看到2个不同的div。 我只想看到突出显示的那个。 我该如何实现？

预先感谢，凯文

Answer 1

您可以使用视口高度作为高度值：

 .main { height: 100vh; background-color: green; } 

 <div class="main"> CONTENT </div> 

使用height：100vh表示所讨论的元素始终是用户/ devie拥有的视口的100％高度。

更多信息： https ： //web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Answer 2

您可以通过将要全屏显示的div的位置设置为absolute ，然后应用以下CSS来实现。

top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;

因此，最终的css如下

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
}

Answer 3

您可以使用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

<div class="any"></div>

Answer 4

.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%); }