Question

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

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

Answer 1

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

这应该有效：）

Answer 2

你可以做到

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

希望它有所帮助或有点你可以设置身体的样式，这样你就不会再指定宽度和高度，只有背景图像。

Answer 3

首先不需要div

尝试

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

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

Answer 4

尝试

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

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

Answer 5

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

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

div {
    height: 100vh;
}