html - 我怎样才能使这个溢出的 div 展开以填满页面高度？

Question

这是一个半途而废的例子: http://jsfiddle.net/gt9vz4qk/1/

CSS: #content {背景色: #fdd;溢出:自动；高度: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>

使用像 vh 这样的相对大小单位会有所帮助，但我觉得我缺少一些非常基本的东西。如您所见，如果您将 jsfiddle 网站上的窗口甚至拆分器向下调整大小，其他元素将开始压缩并弹出第二个滚动条。唯一的滚动条应该是溢出的滚动条。

另一种思考方式是，我希望顶部元素根据需要占据尽可能多的空间，底部元素根据需要占据尽可能多的空间，而其他任何元素都应该由中心元素占据。

Answer 1

这是一个 flexbox解决方案:

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