仅用CSS实现嵌套可滚动div自适应占满屏幕剩余高度

你可以通过CSS Flexbox布局实现需求，无需修改DOM结构，也无需使用JavaScript或固定值calc计算，代码如下：

/* 初始化根元素高度与边距 */
html, body {
  height: 100%;
  margin: 0;
}

/* body设为纵向flex容器，子元素纵向排列 */
body {
  display: flex;
  flex-direction: column;
}

/* header固定高度，不参与flex拉伸 */
header {
  flex: 0 0 60px; /* 替换为你实际的header固定高度值即可 */
}

/* 选中header之后的直接父div容器，设为纵向flex容器，占满body剩余高度 */
body > header + div {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* border、bar元素高度随内容自适应，不拉伸 */
.border, .bar {
  flex: 0 0 auto;
}

/* scrollable元素占满父容器剩余高度，内容溢出时纵向滚动 */
.scrollable {
  flex: 1;
  overflow-y: auto;
}

实现逻辑说明 #

• 给html和body设置100%高度，确保布局可以撑满整个视口高度
• 把body设为纵向Flex容器，固定高度的header不参与弹性拉伸，header后的父容器自动填充body剩余高度
• 父容器同样设为纵向Flex容器，动态高度的.border和.bar高度由内容决定，不参与拉伸
• .scrollable设置弹性拉伸属性占满父容器剩余高度，添加overflow-y: auto保证内容超出时可滚动，不会撑破容器

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