如何让左侧div保持最小高度421px并撑满wrapper底部且设置背景色

这个问题本质是浮动布局的高度塌陷特性导致的——浮动元素脱离了正常文档流，左侧栏只会由自身内容或min-height决定高度，当右侧栏内容撑高容器时，它不会自动跟随容器高度变化。改用Flexbox布局就能完美解决，同时还能保留你需要的最小高度要求。

具体修改方案 #

1. 把.wrapper的display:block改成display:flex，如果不需要容器滚动可以去掉overflow:scroll（若需滚动可保留，但Flex布局下滚动逻辑需额外调整）。
2. 移除.left-column和.right-column的float属性，Flex布局不需要浮动来实现两栏排列。
3. 保留.left-column的min-height:421px，Flex子元素会自动拉伸高度匹配容器，同时这个最小高度能确保内容少时左侧栏也保持指定高度。

修改后的完整代码 #

CSS #

.wrapper{
  background: white;
  font-family: "Roboto";
  font-size: 14px;
  line-height: 1.5;
  width: 298px;
  display: flex; /* 关键修改：改用Flex布局 */
  margin: 0 0 0.5cm 20px;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
}
.left-column {
  width: 30%;
  min-height: 421px; /* 保留最小高度要求 */
  background-color: #144071;
  color: white;
}
.right-column {
  width: 70%;
  color: black;
  padding-left: 10px; /* 可选：加内边距让内容不贴边 */
}

HTML #

<div class="wrapper">
  <div class="left-column"> content content </div>
  <div class="right-column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur quo sint fugit. Eveniet. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur quo sint fugit. Eveniet. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi officiis iste culpa, pariatur vel dolores aspernatur
    <div style="margin-top: 20px;">
      <strong>现在右侧栏内容再多，左侧栏的背景色也会一直延伸到容器底部啦！</strong>
    </div>
  </div>
</div>

原理说明 #

Flex布局的默认特性是子元素等高拉伸：当.wrapper被右侧栏内容撑开高度时，左侧栏作为Flex子元素会自动匹配容器的高度；同时min-height:421px保证了即使左侧栏内容极少，也会至少保持421px的高度，完全满足你的需求。

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