Question

就像我说的那样，div只和内容一样高。我有div：

  <div class="body-container">
  <p>Hello</p>

  </div>

CSS：
body-container { width: 100%; height: 100%; background-color: blue; }
但是，背景仅出现在Hello段落中。这非常烦人，因为我希望背景覆盖整个页面！谢谢你的帮助。

Answer 1

尝试将更改高度属性设置为：

height: 100vh;

Answer 2

首先，通过在其前面添加一个点来设置类的样式，例如.body-container。
对于您的问题，通过将100%的高度和宽度设置为.body-container，html和body的宽度和高度也必须为100%让.body-container采用完整尺寸，例如：

＆＃13;

html, body {
  width: 100%;
  height: 100%;
}
.body-container {
  width: 100%;
  height: 100%;
  background-color: blue;
}

＆＃13;

<div class="body-container">
  <p>Hello</p>

</div>

＆＃13;

您还可以使用视口单元vh和vw强制完整尺寸：

＆＃13;

.body-container {
  width: 100vw;  /* 1vw = 1% of screen width */
  height: 100vh; /* 1vh = 1% of screen height */
  background-color: blue;
}

＆＃13;

<div class="body-container">
  <p>Hello</p>

</div>

＆＃13;