如何让容器排除指定内容后占据剩余空间？

在前端页面布局中，让容器排除指定内容后占据剩余空间是非常常见的需求，比如页面左侧固定宽度的导航栏，右侧内容区自动填充剩余宽度；或者顶部固定高度的操作栏，下方内容区占据剩下的高度。这类需求可以通过多种CSS布局方案实现，其中flex布局是最便捷且兼容性较好的选择。

基于flex布局的实现方案

flex布局的核心特性是可以通过flex属性控制子元素的空间分配，非常适合处理剩余空间分配的场景。我们只需要给父容器设置display: flex，然后给需要占据剩余空间的子容器设置flex: 1即可，不需要手动计算尺寸。

水平方向排除固定宽度内容

假设父容器是水平排列，左侧有一个固定宽度200px的侧边栏，右侧内容区需要占据剩余宽度，实现代码如下：

/* 父容器样式 */
.parent {
    display: flex;
    width: 100%;
    height: 500px;
    border: 1px solid #ccc;
}
/* 固定宽度的侧边栏 */
.sidebar {
    width: 200px;
    background-color: #f0f0f0;
}
/* 占据剩余空间的容器 */
.main-content {
    flex: 1;
    background-color: #e8f4ff;
}

对应的HTML结构如下：

<div class="parent">
    <div class="sidebar">固定侧边栏</div>
    <div class="main-content">剩余空间内容区</div>
</div>

这里的flex: 1是flex-grow: 1, flex-shrink: 1, flex-basis: 0%的简写，表示子元素会放大占据剩余空间，缩小也不会小于内容最小尺寸，基础尺寸为0，因此会自动填充父容器减去侧边栏200px后的所有剩余宽度。

垂直方向排除固定高度内容

如果是垂直方向的布局，顶部有固定高度的操作栏，下方内容区占据剩余高度，只需要给父容器设置flex-direction: column，再给内容区设置flex: 1即可：

/* 垂直排列的父容器 */
.vertical-parent {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
}
/* 固定高度的操作栏 */
.header {
    height: 60px;
    background-color: #f5f5f5;
}
/* 占据剩余高度的容器 */
.content {
    flex: 1;
    background-color: #fff3e0;
}

HTML结构如下：

<div class="vertical-parent">
    <div class="header">固定操作栏</div>
    <div class="content">剩余高度内容区</div>
</div>

基于calc函数的实现方案

如果不使用flex布局，也可以通过calc()函数手动计算剩余空间，这种方式兼容性也不错，但需要明确知道被排除内容的具体尺寸。

还是以水平方向固定侧边栏为例，CSS代码如下：

/* 父容器使用普通块布局 */
.calc-parent {
    width: 100%;
    height: 500px;
    border: 1px solid #ccc;
    font-size: 0; /* 消除inline-block间隙 */
}
.sidebar-calc {
    display: inline-block;
    width: 200px;
    height: 100%;
    background-color: #f0f0f0;
    font-size: 16px;
    vertical-align: top;
}
.main-calc {
    display: inline-block;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #e8f4ff;
    font-size: 16px;
    vertical-align: top;
}

这种方式需要手动计算100% - 固定尺寸，如果固定尺寸发生变化，需要同步修改calc里的数值，维护成本比flex布局更高。

两种方案对比

我们可以通过表格对比两种方案的优缺点：

注意事项

• 使用flex布局时，父容器如果有内边距或者边框，需要注意box-sizing属性，避免尺寸计算错误，建议给所有元素设置box-sizing: border-box。
• 如果占据剩余空间的容器内部还有子元素需要滚动，需要给该容器设置overflow: auto，避免内容溢出父容器。
• 使用calc函数时，运算符前后必须加空格，比如calc(100% - 200px)是正确的，calc(100%-200px)会失效。

实际开发中，如果不需要兼容非常旧的浏览器，优先选择flex布局方案，代码更简洁，维护成本更低。如果需要兼容IE9及以下，再考虑使用calc函数或者传统的浮动布局方案。

CSSflex布局剩余空间分配容器布局修改时间：2026-07-17 07:57:31