菜鸟-创作你的创作

CSS实现元素撑满剩余空间的五种方法

lichongyang

方法 1️⃣ Flexbox 弹性布局

核心：使用 flex-grow: 1 让元素自动填充父容器剩余空间。

<div class="flex-container">
  <div class="sidebar">侧边栏</div>
  <div class="content">内容区域</div>
</div>

<style>
.flex-container {
  display: flex;
  height: 200px;
  border: 1px solid #ccc;
}
.sidebar {
  width: 100px;
  background: lightcoral;
}
.content {
  flex-grow: 1; /* 撑满剩余空间 */
  background: lightblue;
}
</style>

✅ 优点：简单、响应式、水平/垂直都可使用
⚠️ 注意：父容器必须 display: flex

方法 2️⃣ Grid 布局

核心：使用 1fr 或 auto 填充剩余空间。

<div class="grid-container">
  <div class="sidebar">侧边栏</div>
  <div class="content">内容区域</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr; /* 第二列撑满剩余空间 */
  height: 200px;
}
.sidebar {
  background: lightcoral;
}
.content {
  background: lightblue;
}
</style>

✅ 优点：结构明确，可控制多列/多行
⚠️ 注意：父容器需要 display: grid

方法 3️⃣ 绝对定位 + left/right/top/bottom

核心：绝对定位元素相对于父元素撑满剩余空间。

<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="content">内容区域</div>
</div>

<style>
.container {
  position: relative;
  height: 200px;
}
.sidebar {
  width: 100px;
  height: 100%;
  float: left;
  background: lightcoral;
}
.content {
  position: absolute;
  left: 100px; /* 从侧边栏右侧开始 */
  right: 0;
  top: 0;
  bottom: 0;
  background: lightblue;
}
</style>

✅ 优点：不依赖 Flex/Grid，兼容性好
⚠️ 注意：脱离文档流，需计算偏移

方法 4️⃣ calc() 动态计算宽度

核心：使用 width: calc(100% - 已知元素宽度)。

<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="content">内容区域</div>
</div>

<style>
.container {
  height: 200px;
}
.sidebar {
  float: left;
  width: 100px;
  height: 100%;
  background: lightcoral;
}
.content {
  float: left;
  width: calc(100% - 100px); /* 剩余宽度 */
  height: 100%;
  background: lightblue;
}
</style>

✅ 优点：简单明了
⚠️ 注意：适合已知固定宽度元素，不够灵活

方法 5️⃣ Table / display: table-cell

核心：使用 display: table 和 table-cell 自动撑满。

<div class="table-container">
  <div class="sidebar">侧边栏</div>
  <div class="content">内容区域</div>
</div>

<style>
.table-container {
  display: table;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}
.sidebar {
  display: table-cell;
  width: 100px;
  background: lightcoral;
}
.content {
  display: table-cell; /* 撑满剩余空间 */
  background: lightblue;
}
</style>

✅ 优点：兼容老浏览器
⚠️ 注意：结构受表格限制，不适合复杂布局

总结与建议

方法优点缺点适用场景
Flexbox简单、响应式父元素需 flex多列/多行布局、响应式网页
Grid精确、多列控制父元素需 grid复杂网格布局
Absolute精确定位脱离文档流弹窗、覆盖内容
calc()简单明了已知宽度限制固定侧边栏布局
Table-cell老浏览器支持受表格限制兼容性需求高的项目

✅ 现代推荐：

退出移动版