在css中如何实现布局元素自动填充剩余空间

在CSS布局开发中，让元素自动填充剩余空间是非常常见的需求，比如侧边栏固定宽度、主内容区自适应撑满剩余宽度，或者顶部导航固定高度、下方内容区自动填充剩余高度等场景，都需要用到对应的布局技巧。不同的CSS布局方案有不同的实现方式，下面逐一介绍。

使用flex布局实现剩余空间填充

flex布局是目前最常用的自适应布局方案，通过给父容器设置display: flex，再给需要填充剩余空间的元素设置flex: 1属性，就能让该元素自动占据剩余空间。flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto，当设置为flex: 1时，等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，元素会按照剩余空间的比例分配空间。

水平方向剩余空间填充示例

实现左侧固定200px宽度，右侧内容区自动填充剩余宽度的布局：

<!-- HTML结构 -->
<div class="flex-container">
  <div class="sidebar">侧边栏</div>
  <div class="main-content">主内容区</div>
</div>

<!-- CSS样式 -->
<style>
.flex-container {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}
.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}
.main-content {
  flex: 1;
  background-color: #e6f7ff;
}
</style>

垂直方向剩余空间填充示例

实现顶部导航固定60px高度，下方内容区自动填充剩余高度的布局：

<!-- HTML结构 -->
<div class="flex-vertical-container">
  <div class="header">顶部导航</div>
  <div class="content">内容区域</div>
</div>

<!-- CSS样式 -->
<style>
.flex-vertical-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}
.header {
  height: 60px;
  background-color: #f0f0f0;
}
.content {
  flex: 1;
  background-color: #e6f7ff;
}
</style>

使用grid布局实现剩余空间填充

grid布局是二维布局方案，同样可以很方便地实现剩余空间填充，通过grid-template-columns或grid-template-rows属性设置轨道尺寸，使用fr单位表示剩余空间分配比例。

水平方向剩余空间填充示例

同样实现左侧固定200px，右侧填充剩余空间的布局：

<!-- HTML结构 -->
<div class="grid-container">
  <div class="sidebar">侧边栏</div>
  <div class="main-content">主内容区</div>
</div>

<!-- CSS样式 -->
<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}
.sidebar {
  background-color: #f0f0f0;
}
.main-content {
  background-color: #e6f7ff;
}
</style>

垂直方向剩余空间填充示例

实现顶部固定60px，下方填充剩余高度：

<!-- HTML结构 -->
<div class="grid-vertical-container">
  <div class="header">顶部导航</div>
  <div class="content">内容区域</div>
</div>

<!-- CSS样式 -->
<style>
.grid-vertical-container {
  display: grid;
  grid-template-rows: 60px 1fr;
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}
.header {
  background-color: #f0f0f0;
}
.content {
  background-color: #e6f7ff;
}
</style>

两种方案对比与适用场景

flex布局更适合一维方向的布局，比如单行或单列的线性排列，使用起来更灵活，兼容性也更好，支持IE10及以上版本。grid布局适合二维布局，能同时处理行和列的分配，语法更简洁，适合复杂的网格类布局，但兼容性稍差，不支持IE浏览器。

如果只需要处理单个方向的剩余空间填充，两种方案都可以，根据项目兼容性要求选择即可。如果是简单的自适应布局，flex布局是更通用的选择。

注意事项

• 使用flex布局时，如果父容器没有设置明确的高度，子元素的flex: 1在垂直方向可能无法生效，需要给父容器设置高度。
• grid布局中的fr单位是分配剩余空间，不是固定比例，如果其他轨道有固定尺寸，剩余空间才会按照fr的比例分配。
• 如果填充剩余空间的元素内部有固定尺寸的内容，需要注意内容溢出问题，可以配合overflow属性处理。

CSSflex_layoutgrid_layout剩余空间填充修改时间：2026-06-20 09:51:31