如何让左侧列Div高度始终等于父Div/右侧列高度？

你的核心问题是父容器.row用了浮动布局，导致容器高度塌陷，左侧列无法继承父容器的实际高度。改用Flex布局就能轻松解决这个问题，具体修改如下：

修改后的代码 #

CSS #

.row {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex; /* 关键：父容器用flex布局，自动包裹子元素高度 */
}

.col {
  /* 移除原有的float和height/min-height，flex子元素默认会拉伸高度 */
}

#coll {
  border: 1px blue solid;
  width: 30%;
  display: flex;
  flex-direction: column; /* 保持内部纵向布局 */
}

#block1 {
  background-color: #FFE;
  flex: 1 1 auto; /* 自动填充左侧列的剩余高度 */
}

#block2 {
  background-color: #FEF;
  flex: 0 1 auto; /* 保持自身内容高度 */
}

#colr {
  border: 1px #EFF solid;
  width: 60%;
}

#block3 {
  background-color: #EEF;
  height: 300px; /* 模拟动态高度，可随意修改测试 */
}

HTML #

<div class="row">
  <div id="coll" class="col ">
    <div id="block1"> 用户专属导航链接区块 </div>
    <div id="block2"> 固定链接1<br>固定链接2 </div>
  </div>
  <div id="colr" class="col">
    <div id="block3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
</div>

原理说明 #

• .row设置display: flex后，会自动根据最高的子元素（右侧内容列）确定自身高度，同时所有flex子元素（左右两列）默认会拉伸至与父容器高度一致。
• 左侧#coll的flex-direction: column配合block1的flex:1，让导航区块自动填充左侧列的剩余高度，固定链接区块保持自身高度。

这样不管右侧#block3的高度怎么动态变化，左侧列都会自动匹配高度，完全同步。

内容的提问来源于stack exchange，提问作者J Alejandro Ceballos Z