如何用CSS实现左列自适应填充右列调整后的剩余空间？

嘿，这个需求用现代CSS布局就能轻松解决！你之前用的float固定宽度的方式没法实现这种“右列调整尺寸，左列自动填满剩余空间”的效果，我给你两个靠谱的方案，都是现在前端布局的主流选择：

方案一：Flexbox布局（最推荐） #

Flexbox天生就是为这种“弹性分配空间”的场景设计的，只需要简单几步就能搞定：

1. 给容器开启Flex布局
2. 给左列设置flex: 1，让它自动占据剩余所有空间
3. 右列可以自由设置宽度（或者让它根据内容自适应）

代码示例：

.container {
  width: 100%;
  display: flex; /* 开启Flex布局，这是核心 */
}
#leftColumn {
  background-color: blue;
  flex: 1; /* *关键属性*：让左列填满容器剩余的所有空间 */
  height: 100vh;
}
#rightColumn {
  background-color: yellow;
  width: 300px; /* 这里可以随便修改宽度，或者删掉让它随内容撑开 */
  height: 100vh;
}

不管你把右列改成400px、200px，还是让它根据内部内容自动调整宽度，左列都会立刻填满容器剩下的空间，完全不会留下空白，而且不需要处理float带来的清除浮动等麻烦问题。

方案二：Grid布局（直观易读） #

Grid布局也能轻松实现这个效果，写法更直观，适合喜欢清晰定义列结构的场景：

1. 给容器开启Grid布局
2. 用grid-template-columns: 1fr auto定义列规则：1fr代表左列占满剩余空间，auto代表右列根据自身尺寸自适应

代码示例：

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto; /* *核心规则*：左列占剩余，右列自适应 */
}
#leftColumn {
  background-color: blue;
  height: 100vh;
}
#rightColumn {
  background-color: yellow;
  width: 300px; /* 同样可以自由调整宽度或随内容自适应 */
  height: 100vh;
}

这个方案的逻辑非常清晰，1fr就是“一份可用空间”，不管右列怎么变化，左列都会自动填满剩下的部分，布局稳定性拉满。

为什么原来的float布局不行？ #

你之前用的float: left加固定50%宽度的方式，本质是把两列的宽度都固定死了，没法动态分配剩余空间，所以调整右列宽度后会出现空白。而Flex和Grid都是现代CSS布局模块，专门解决这类弹性空间分配的问题，兼容性也很好，现在主流浏览器都支持~

内容的提问来源于stack exchange，提问作者Si-N