如何使此溢出div扩展为填满页面高度？

Question

Here's an example that goes halfway there: http://jsfiddle.net/gt9vz4qk/1/

CSS: #content {background-color: #fdd; overflow: auto; height: 70vh;} #content {background-color: #fdd; overflow: auto; height: 70vh;}

HTML:

<button>Hello</button>
<div id="content">
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
</div>
<input>

Using relative size units like vh helps, but I feel like I'm missing something really basic. As you can see, if you resize the window or even the splitter on the jsfiddle website far down, the other elements start compressing and a second scrollbar pops up. The only scrollbar should be the overflow one.

Another way to think about this is that I want the top elements to take up as much space as they need, the bottom elements to take as much space as they need, and anything else should be taken up by the central element.

Answer 1

Here's a flexbox solution:

 html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; } #content { background-color: #fdd; overflow: auto; flex: 1; } 

 <div> <button>Hello</button> </div> <div id="content"> A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> </div> <div> <input> </div> 

Fiddle