如何使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%;
}