Take up full page, not just window height

Question

I've heard that using 100vh will make an element take up the whole browser window. That's true. 100vh does not make the element take up the entire page though. Scroll bars can interfere with this.

Example:

#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>

How can I make sure that the background color stays the same for the entire page, not just the viewable part at the start?

https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space — Daniel A. White, Jul 30 '17 at 01:11
@DanielA.White If you know how to solve the problem, could you please provide an answer? — Bennett, Jul 30 '17 at 01:51

NyxCode · Answer 1 · 2017-07-30T01:13:59.240

Since your text is contained inside of your div, there is no need to specify a height - It will be as large as its content.

#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>

Edit

What you want is (as far i know) not possible. What you can do is color the background and use a as a placeholder. I'm not sure if this solves your problem, but thats the only solution I can think of.

#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>

Sorry, I had trouble replicating my issue. See the updated post. — Bennett, Jul 30 '17 at 00:58

score 0 · Answer 2 · answered Jul 30 '17 at 00:50

Easy just make it 100% or don't specify a height.

#a {
  height: 100%;
  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>

Make the height 100% using percent will scale the whole page — Poldo, Jul 30 '17 at 00:51

Take up full page, not just window height

2 Answers2