有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。

（1）绝对定位法

外层 div 使用 position: relative；高度要求自适应的 div 使用：

.fill {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
}

（2）flex 布局（推荐）

.wrapper { display: flex; flex-direction: column; }
.fixed { height: 100px; }
.fill { flex: 1; }

补充：

  • 还有一种经典做法是父容器用 display: table（高度自适应）+ display: table-row，子项高度填满用 height: 100% 配合 display: table-cell，但现代项目已基本被 flex 替代。
  • 还可以用 CSS Grid： 
    .wrapper { display: grid; grid-template-rows: 100px 1fr; }
    一行代码就解决。
  • 注意 flex 方案的 flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，相当于"占满剩余空间"，而不是 100%。