父元素无固定像素高度时，如何不使用flex、table布局让子元素height:100%生效

解决方案 #

你可以通过padding负边距抵消法实现float布局下的等高子元素，不需要固定父元素高度，也不会用到flex、table相关布局，不会破坏你现有响应式逻辑：

调整后的CSS代码 #

.row{
    background-color: grey;
    overflow: hidden; /* 必须，用来裁剪超出的padding区域 */
}
.cell{
    display:block;
    float:left;
    /* 核心代码：足够大的底部内边距 + 等值负底部边距抵消 */
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
#cell1{
    background-color: yellow;
}
#cell2{
    background-color: orange;
}
#cell3{
    background-color: #06C;
}

HTML代码无需修改 #

<div class="row">
    <div id="cell1" class="cell">Content 1</div>
    <div id="cell2" class="cell">Content 2<br>Content 2<br>Content 2<br>Content 2<br>Content 2<br>Content 2<br></div>
    <div id="cell3" class="cell">Content 3</div>
</div>

原理解释 #

• 给每个浮动子元素添加一个足够大的padding-bottom，让每个子元素的视觉高度被拉到远超过实际最高内容的高度
• 用等值的margin-bottom:-9999px抵消掉padding带来的高度占位，让父元素的高度依然由真实内容最高的子元素决定
• 父元素设置overflow:hidden裁剪掉所有子元素超出父元素高度的多余padding部分，最终视觉上所有子元素高度都和父元素一致，也就是和最高内容的子元素等高

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