使用Foundation框架时，行内小Div设置height:100%不生效问题

开发者阿泽

2026-8-22

问题

我使用Foundation for Sites实现响应式布局，代码结构如下：

<div class="row"> <!-- 定义12列网格 -->
  <div class="columns large-1 medium-1">&nbsp;</div> <!-- 左侧留白 -->
  <div class="columns large-6 medium-6" style="border: red solid 1px;">
    大量内容，包含一个标题和多行文本
  </div>  
  <div class="columns large-4 medium-4" style="border: red solid 1px; height: 100%;">
    少量内容
  </div>
  <!-- 右侧无需留白列 -->  
</div>

红色边框仅用于测试，按预期给内容较少的小Div设置height:100%应该与同行内容较多的大Div等高，但实际边框仅包裹文本内容。通过浏览器开发者工具查看，row和大columns的计算高度超过100px，而小columns仅17px。我需要让小Div等高以便后续将其内容底部对齐，未修改Foundation的row和columns类CSS，仅添加了示例中的元素样式，请问问题出在哪？

补充说明：
实际显示效果：

|--------------------|--------------------|   
| 大量文本           | 少量文本           |  
| 大量文本           |--------------------|  
| 大量文本           |  
| 大量文本           |  
|--------------------|

期望显示效果：

|--------------------|--------------------|  
| 大量文本           | 少量文本           |  
| 大量文本           |                    |  
| 大量文本           |                    |  
| 大量文本           |                    |  
|--------------------|--------------------|

解决方案

问题根源

Foundation默认的row和columns采用浮动布局，浮动元素会脱离常规文档流，导致两个核心问题：

父容器row的高度由文档流内元素撑开，但浮动的columns不会主动参与高度计算（除非手动清除浮动）；
子元素设置height:100%时，需要父容器有明确的高度值才能生效，但row的高度是动态由内容撑开的，没有固定值，所以小Div的height:100%无法被正确解析。

解决方法

方法1：使用Foundation自带的等高布局类（推荐）

Foundation 6及以上版本支持Flex布局的行类，直接给row添加flex-row类即可让内部列自动等高：

<div class="row flex-row">
  <!-- 原有columns结构保持不变 -->
</div>

此方式无需额外写CSS，且天然支持响应式换行。如果要将小Div的内容底部对齐，只需给该列添加align-self: flex-end样式：

<div class="columns large-4 medium-4" style="border: red solid 1px; align-self: flex-end;">
  少量内容
</div>

方法2：手动将row改为Flex容器

如果你的Foundation版本不支持flex-row，可以自定义CSS将row转为Flex布局：

.row {
  display: flex;
  flex-wrap: wrap; /* 保留响应式换行特性 */
}

此时内部的columns会自动拉伸至等高，无需再设置height:100%，同样可以用align-self: flex-end实现内容底部对齐。

方法3：基于浮动布局的兼容方案（不推荐）

若必须保留浮动布局，需先让row成为BFC（块级格式化上下文）以正确计算高度，再给所有columns设置height:100%：

.row {
  overflow: hidden; /* 触发BFC */
}
.row::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动，确保row高度被撑开 */
}
.columns {
  height: 100%;
}

此方式兼容性较好，但Flex布局在响应式场景下更灵活，优先推荐前两种方法。

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