如何使div覆盖整个屏幕

Question

我有一个问题。

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

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

提前致谢， 凯文

Answer 1

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

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

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

使用高度：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%);
}