36. 有一个高 100%的 div，里面有一个高 100px 的 div，剩下一个自动填满

总结

1. 使用 calc(100% - 100px) 进行高度计算；
2. 使用 Flexbox 布局，通过 flex: 1 自动填充；
3. 使用 CSS Grid 布局，通过 1fr 定义剩余空间。

---

概述

在实际开发中，我们经常遇到布局需求：一个高度为 100% 的容器中包含一个固定高度的子元素，另一个子元素需要自动填满剩余空间。这种需求在构建布局（如顶部固定高度的标题栏 + 可滚动内容区域）时非常常见。

实现方式

方法一：使用 calc() 函数

CSS 的 calc() 函数允许在样式中进行数学运算，适用于已知固定高度的场景。

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fixed {
  height: 100px;
}

.fill {
  height: calc(100% - 100px);
}

方法二：使用 Flexbox 布局（推荐）

Flexbox 是一种现代布局方式，可以更优雅地实现此类需求，无需手动计算高度。

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fixed {
  height: 100px;
}

.fill {
  flex: 1;
}

✅ 推荐使用 Flexbox：它更灵活、可维护性强，尤其适合响应式布局。

方法三：使用 Grid 布局

CSS Grid 布局也可以轻松实现该效果，适用于更复杂的二维布局场景。

.container {
  height: 100%;
  display: grid;
  grid-template-rows: 100px 1fr;
}

HTML 结构示例

<div class="container">
  <div class="fixed">固定高度 100px</div>
  <div class="fill">自动填满剩余空间</div>
</div>

常见问题与注意事项

• 确保 .container 的父容器有明确的高度定义，否则 100% 高度可能无效。
• 使用 calc() 时注意单位一致性，避免计算错误。
• Flexbox 和 Grid 布局在现代浏览器中兼容性良好，但在旧浏览器（如 IE）中可能需要 polyfill。