如何用CSS实现三列布局：左右固定200px，中间自适应填充剩余空间

我太懂这种感受了——用表格做这种三列布局简直手到擒来，但换成div+CSS就处处碰壁，之前找的方案都不管用对吧？别着急，给你几个经过验证的靠谱方案，肯定能解决你的问题：

这是目前实现自适应布局最简洁高效的方式，兼容性也覆盖了绝大多数现代浏览器（除了IE9及以下），代码好写也好维护。

HTML 结构 #

<div class="container">
  <div class="left-column">左列固定宽度200px</div>
  <div class="middle-column">中间列自动填充剩余空间</div>
  <div class="right-column">右列固定宽度200px</div>
</div>

CSS 代码 #

/* 先让页面根元素占满整个视口，消除默认边距 */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 容器设置为flex布局，让子元素横向排列 */
.container {
  display: flex;
  height: 100%; /* 填满浏览器窗口高度 */
}

/* 左右列固定宽度 */
.left-column, .right-column {
  width: 200px;
  background-color: #f5f5f5; /* 加个背景色方便区分，可自定义 */
}

/* 中间列用flex:1自动占据剩余空间 */
.middle-column {
  flex: 1;
  padding: 0 1rem; /* 可选，给内容加些内边距更美观 */
}

核心就是flex:1属性，它会让中间列自动瓜分容器里所有未被左右列占用的空间，完美实现你要的效果。

Grid布局是专门为网格场景设计的，实现这种三列布局同样直观，适合需要更复杂网格的场景。

HTML结构和上面一致，CSS代码如下：

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: grid;
  /* 直接定义三列宽度：左200px，中间1份可用空间，右200px */
  grid-template-columns: 200px 1fr 200px;
  height: 100%;
}

.left-column, .right-column {
  background-color: #f5f5f5;
}

.middle-column {
  padding: 0 1rem;
}

这里的1fr是Grid的单位，代表“一份可用空间”，中间列会自动填满剩下的宽度，代码非常直观易懂。

如果需要兼容比较旧的浏览器（比如IE9），可以用浮动+margin的方案，虽然代码稍繁琐，但稳定性没问题：

HTML 结构（注意左右列要放在中间列前面） #

<div class="container">
  <div class="left-column">左列固定宽度200px</div>
  <div class="right-column">右列固定宽度200px</div>
  <div class="middle-column">中间列自动填充剩余空间</div>
</div>

CSS 代码 #

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  height: 100%;
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

.left-column {
  width: 200px;
  float: left;
  height: 100%;
  background-color: #f5f5f5;
}

.right-column {
  width: 200px;
  float: right;
  height: 100%;
  background-color: #f5f5f5;
}

.middle-column {
  margin: 0 200px; /* 左右margin等于左右列宽度，留出空间 */
  height: 100%;
  padding: 0 1rem;
}

通过浮动左右两列，中间列用margin撑开左右的空间，就能自动填满剩余区域，记得用overflow:hidden清除浮动带来的容器高度问题。

这几个方案都是经过实际验证的，你可以根据自己的浏览器兼容性需求选择，个人优先推荐Flexbox或者Grid，代码简洁还不容易出问题～

内容的提问来源于stack exchange，提问作者Matt Gray