Question

我听说使用100vh会使元素占用整个浏览器窗口。这是真的。 100vh 不会使元素占用整个页面。滚动条可能会干扰这一点。

示例：

＆＃13;

#container {
  display: flex;
}

#a {
  height: 100vh;
  background-color: lightblue;
  flex: 1;
}

#b {
  flex: 2;
  word-wrap: break-word;
  background-color: lightgray;
}

body {
  margin: 0;
}

＆＃13;

<div id="container">
  <div id="a"></div>
  <div id="b">As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long.</div>
</div>

＆＃13;

如何确保整个页面的背景颜色保持不变，而不仅仅是开始时的可见部分？

Answer 1

由于您的文本包含在div中，因此无需指定高度 - 它将与其内容一样大。

#a {
  word-wrap: break-word;
  background-color: lightblue;
}

body {
  margin: 0;
}

<div id="a">As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. </div>

修改

你想要的是（据我所知）不可能。您可以做的是为背景着色并使用a作为占位符。我不确定这是否能解决您的问题，但这是我能想到的唯一解决方案。

#container { display: flex; background-color: lightblue; } #a { flex: 1; } #b { flex: 2; word-wrap: break-word; background-color: lightgray; } body { margin: 0; }

<div id="container"> <div id="a"></div> <div id="b">As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long.</div> </div>

Answer 2

只需将其设为100%或不指定高度。

＆＃13;

#a {
  height: 100%;
  word-wrap: break-word;
  background-color: lightblue;
}

body {
  margin: 0;
}

＆＃13;

<div id="a">As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. </div>

＆＃13;

占据整页，而不仅仅是窗口高度

2 个答案: