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

Question

我有一个问题。

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

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

提前致谢， 凯文

Answer 1

您可以使用视口(viewport)高度作为您的高度值:

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

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

使用 height: 100vh 意味着相关元素始终是用户/设备所具有视口(viewport)的 100% 高度。

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