css - 在 CSS 中，如何使 div 与整个页面一样高？

Question

在 CSS 中，如何使 div 与整个页面一样高？

我想让该 div 占据网页的整个空间并在其中放置背景图像。

score 2 · Accepted Answer

div{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color:#eeeeee;
}

这应该工作:)

score 0 · Accepted Answer

你可以做

#mainContainer { 
  width: 100%;
  height: 100%;
  background: url('imagePath'); //you can add a repeat or no repeat here
}

希望它有所帮助，或者在某种程度上您可以设置主体样式，以便您不再指定宽度和高度，只指定背景图像。

score 0 · Accepted Answer

首先不需要 div

尝试

<body style="position: relative; margin: 0; background-color: Blue;">
<p>
    Hello
</p>
</body>

当然将背景颜色更改为背景图像

score 0 · Accepted Answer

尝试

<div id="foo"></div>

<script>
$("#foo").css("width", screen.width);
$("#foo").css("height", screen.height);
</script>

score 0 · Accepted Answer

另一种解决方案是使用 unit vh。1 vh 等于总视口高度的 1%。如果您想了解有关单位的更多信息，可以查看这篇文章。

要使 div 与整个视口一样高，只需设置height为 100vh。

div {
    height: 100vh;
}

5 回答 5