css - 占用整个页面，而不仅仅是窗口高度

Question

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

例子:

#container {
  display: flex;
}

#a {
  height: 100vh;
  background-color: lightblue;
  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 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>