如何在float布局下实现左右区块等高（无JS/静态高度）

核心思路 #

用内边距+负外边距+溢出隐藏的经典float等高技巧，不脱离文档流，让左右列高度自动对齐到最高的一侧，完全无需JS。

修改后的CSS代码 #

.card-wrapper {
  display: block; /* 改为块级元素，避免inline元素间距问题，确保宽度100%生效 */
  border: 1px solid #ababab;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial, serif;
  width: 100%;
  overflow: hidden; /* 关键：裁剪超出的负margin区域 */
}

.big {
  width: 66%;
  float: left;
  padding-bottom: 9999px; /* 超大内边距强制列高度拉伸 */
  margin-bottom: -9999px; /* 负外边距抵消内边距，不影响容器高度 */
}

.card {
  border: 1px solid black;
  height: 100%; /* 让card继承列的高度，确保内部区域正常拉伸 */
}

.card__header {
  width: 100%;
  background: green;
  height: 100px;
}

.card__main {
  background: yellow;
}

.card__footer {
  background: blue;
}

.gap {
  padding-top: 10px;
}

.right-col {
  width: 33%;
  float: right;
  padding-bottom: 9999px; /* 和左侧列保持一致的超大内边距 */
  margin-bottom: -9999px; /* 对应负外边距 */
}

关键修改说明 #

1. 把.card-wrapper的inline-block改成block：避免inline元素的默认间距，保证宽度100%正常生效。
2. 给左右浮动列加padding-bottom:9999px和margin-bottom:-9999px：超大内边距强制列高度拉伸，负外边距把容器高度拉回正常，配合overflow:hidden裁剪超出部分，实现等高。
3. 给.card加height:100%：让卡片完全填充所在列的高度，确保黄色的card__main区域能正常拉伸。

完整代码示例 #

<div class="card-wrapper">
  <div class="card big">
    <div class="card__header"></div>
    <div class="card__main">
      Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
    </div>
    <div class="card__footer">
      Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
    </div>
  </div>
  <div class="right-col">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__main">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
      <div class="card__footer">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
    </div>
    <div class="gap"></div>
    <div class="card card__little"> <!-- 补上card类，保证样式统一 -->
      <div class="card__header"></div>
      <div class="card__main">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
      <div class="card__footer">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
    </div>
  </div>
</div>

补充提示 #

• 右侧的.card__little要加上.card类，否则没有边框和高度继承，样式会不一致。
• 9999px是足够覆盖所有内容高度的数值，也可以用10000px等更大的值，效果一致。

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