如何让一个div覆盖整个屏幕

Question

我有个问题。

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

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

提前致谢，凯文

原文由 Kevin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 David Wilkinson 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 saugandh k 发布，翻译遵循 CC BY-SA 3.0 许可协议