Question

这是一个中途的例子： http://jsfiddle.net/gt9vz4qk/1/

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

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

考虑这一点的另一种方法是，我希望顶部元素占用他们需要的空间，底部元素占用他们需要的空间，其他任何东西都应该由中心元素占用。

Answer 1

这是一个flexbox解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle

如何使这个溢出div扩展以填充页面高度？

1 个答案: