如何让 div 覆盖整个屏幕

Question

我有一个问题。

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

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

提前致谢，凯文

Answer 1

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

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

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

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

如何让 div 覆盖整个屏幕

How to make a div cover the whole screen

html

css

responsive