纯CSS解决方案，用于具有堆叠div的等列高度

我重新创建了我的问题

问题是“左”div应该与“上”和“下”右div的组合高度相匹配。我一直在阅读关于如何实现不同内容的列的高度相等的文章和教程，但没有一篇文章和教程适用于“堆叠”列

我当前的非工作解决方案基于以下文章中的概念：

使div的高度等于最高柱的唯一方法 是指该div是否包含所有列。因此，我们要另作解释 通过将列放置在容器中，我们可以使容器 是最高柱子的高度。这是一个非常有用的方法 结构要使此结构在所有浏览器中正常工作 容器div必须浮动（左或右）加上每个列 内容div也必须浮动，无论以何种方式浮动都无关紧要

我知道jQuery插件和调整大小，但我更喜欢CSS解决方案

HTML:

---

您可以为此使用

display:table

属性：

#height-container{
    background:orange;
    display: table;
    vertical-align:top;
}

#left{
    display: table-cell;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    display: table-cell;
}

检查这个

但在IE8及以上都是工作

已更新

CSS

#left{
    width:200px;
    background:#CD5555;
}

#right{
    float:right;
    width:600px;
}
.clr{clear:both;}

HTML

<div id='right'></div>
<div id='left'>
  <div class="clr"></div>
</div>

---

选中它

您可以为此使用

display:table

属性：

#height-container{
    background:orange;
    display: table;
    vertical-align:top;
}

#left{
    display: table-cell;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    display: table-cell;
}

检查这个

但在IE8及以上都是工作

已更新

CSS

#left{
    width:200px;
    background:#CD5555;
}

#right{
    float:right;
    width:600px;
}
.clr{clear:both;}

HTML

<div id='right'></div>
<div id='left'>
  <div class="clr"></div>
</div>

---

检查它

这里有一个在IE 7中也能工作的解决方案。这个解决方案利用了负边距底部和填充底部，唯一的问题是您必须给边距底部和填充底部值相同，并给列溢出隐藏属性的容器一个大值

#container{
    width:1000px;
    margin:0 auto;
    **overflow: hidden;**
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    **padding:20px 20px 99999px 20px;
    margin-bottom: -99999px;**
}

#right{
    width:600px;
    float:right;
    **padding-bottom: 99999px;
    margin-bottom: -99999px;**
    background-color: black;
    height: 1000px;
}

---

这是一个在IE7中也能工作的解决方案。这个解决方案利用了负的margin-bottom和padding-bottom，唯一的问题是您必须给margin-bottom和padding-bottom值相同，并且给一个大值，并给column-overflow-hidden属性的容器赋值

#container{
    width:1000px;
    margin:0 auto;
    **overflow: hidden;**
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    **padding:20px 20px 99999px 20px;
    margin-bottom: -99999px;**
}

#right{
    width:600px;
    float:right;
    **padding-bottom: 99999px;
    margin-bottom: -99999px;**
    background-color: black;
    height: 1000px;
}

---

你有没有在div css表中尝试过这个功能？@Martin没有，我看过一些实现它的示例，但是代码看起来很混乱。不过我对它持开放态度。你有没有在div css表中尝试过这一点？@Martin没有，我看过一些实现它的示例，但是代码看起来很混乱。不过，我愿意接受。这是一个很好的解决方案。还有其他方法吗？两种方法都很好。你应该在你的答案中加上另一个解决方案，我会检查它是不是很好的解决方案。还有其他方法吗？两种方法都很好。你应该在你的答案中添加另一个解决方案，我会检查一下，我使用了一种类似的方法来处理粘性页脚，我不太喜欢它，但向后兼容性是一个巨大的优势。谢谢你的贡献，我用了一个类似的方法来处理粘性页脚，我不太喜欢它，但是向后兼容性是一个巨大的优势。谢谢你的贡献