如何让div覆盖整个屏幕

Question

我有一个问题。

到目前为止我得到了这个：

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

提前致谢， 凯文

Answer 1

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

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

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

使用 height: 100vh 意味着相关元素始终是用户/设备所具有的视口的 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%);
}