如何让元素占满剩余高度？CSS自适应布局技术问询

这个问题其实可以通过CSS Flexbox布局完美解决，完全不需要JavaScript或者position:fixed，而且能自动适配窗口大小变化。我来给你拆解一下解决方案：

修改后的完整代码 #

* { margin: 0; box-sizing: border-box; } /* 加上box-sizing避免padding/margin干扰高度计算 */
html, body {
  height: 100%; /* 让根元素占满整个视口高度 */
  display: flex;
  flex-direction: column; /* 垂直排列body的子元素 */
}
.toolbar { height: 34px; }
.outer {
  flex: 1; /* 自动填充body中除顶部toolbar外的所有剩余空间 */
  display: flex;
  flex-flow: column;
  overflow: hidden; /* 防止内部元素超出时撑大outer容器 */
}
.inner {
  overflow-y: scroll;
  flex: 1; /* 填充outer中除内部toolbar外的剩余空间 */
}

<div class="toolbar"> MENU BAR </div>
<div class="outer">
  <div class="toolbar"> TOOLBAR </div>
  <div class="inner">
    <p>Bacon ipsum dolor amet filet mignon turducken bacon meatball. Cupim biltong kevin, pork turkey fatback pork loin bacon spare ribs porchetta ground round. Beef ribs buffalo rump jowl fatback, tongue picanha beef. Chuck sausage ham hock, meatloaf kevin shoulder salami drumstick swine.</p>
    <!-- 其余重复文本内容省略 -->
  </div>
</div>

关键原理说明 #

• 根元素高度与布局设置：把html和body的高度设为100%，并设置为flex column布局，让它们的子元素（顶部工具栏和.outer）能按垂直方向自动分配空间。
• .outer的flex:1属性：这是核心——它会让.outer自动占据body中除顶部34px工具栏外的所有剩余空间，窗口大小变化时会实时调整高度，完全不需要硬编码固定数值。
• .outer内部的嵌套flex布局：.outer自身也是flex column，内部的工具栏占固定34px高度，.inner通过flex:1占据剩余空间，配合overflow-y:scroll实现内容滚动，同时.outer的overflow:hidden能避免内部元素撑大容器。
• box-sizing:border-box：确保元素的padding或margin不会额外增加高度，让整个布局的高度计算更精准。

这样修改后，你的布局就能完美实现需求：顶部两个工具栏固定在对应位置，.inner在剩余空间内滚动，窗口大小变化时底部不会出现异常间隙，全程用纯CSS实现，不需要任何JavaScript。

内容的提问来源于stack exchange，提问作者Jared Updike