Html 使浮动div具有相同的高度

我有两个并列的div。我不知道它们前面的高度，它根据内容而变化。有没有一种方法可以确保它们始终保持相同的高度，即使其中一个拉伸，也只使用CSS

我做了一把小提琴来展示。我希望红色和蓝色的div高度相同

这是css：

#wrapper {
width: 300px;
}
#left {
    width:50px;
    background: blue;
    float:left;
    height: 100%;  /* sadly, this doesn't work... */
}
#right {
    width:250px;
    background: red;
    float:left;
}

---

您可以尝试使用

display:table cell

代替float。但是，您可能会发现一些较旧的浏览器不理解此规则。见下文：

#wrapper {
    display: table; // See FelipeAls comment below
    width: 300px;
}

#left {
    display: table-cell;
    width: 50px;
    background: blue;
}

#right {
    display: table-cell;
    width: 250px;
    background: red;
}

---

通过使用CSS技巧，您可以在不使用表的情况下实现这一点

示例-

HTML

   <div id="wrapper">
            <div id="columns">
                <div id="left">text</div>
                <div id="right">text<br/>another line<br /></div>
            </div>        
    </div>

---

我建议您阅读这篇文章，解释如何做您正试图做的事情。我会放一把小提琴，显示，但它相当广泛和纯粹的css

Antony answer工作正常，但您需要所有div都具有相同的父级和包装器，我有一个使用javascript的解决方案，但可以与任何类型的元素一起工作，它们只需要具有相同的选择器

  function setEqualHeight(selector, triggerContinusly) {

    var elements = $(selector)
    elements.css("height", "auto")
    var max = Number.NEGATIVE_INFINITY;

    $.each(elements, function(index, item) {
        if ($(item).height() > max) {
            max = $(item).height()
        }
    })

    $(selector).css("height", max + "px")

    if (!!triggerContinusly) {
        $(document).on("input", selector, function() {
            setEqualHeight(selector, false)
        })

       $(window).resize(function() {
            setEqualHeight(selector, false)
       })
    }


}

    setEqualHeight(".sameh", true) 

---

我想指出一个更简单的解决方案。在列上使用相同数量的大

填充底部：500em

和负

边距底部：-500em

，而包装器仅使用

溢出：隐藏

将列剪切到正确的大小

可在此处找到：

---

如Hexodus所示，您可以填充底部和边距底部，但更好的解决方案是使用flexbox或grid

如果你愿意，你可以检查一下。我包括了一个页脚区域，因为这是我需要的，它需要更多的技巧

部分{
宽度：500px；
保证金：自动；
溢出：隐藏；
填充：0；
}
div{
填充：1rem；
}
.标题{
背景：浅蓝色；
}
.侧边栏{
背景：浅绿色；
宽度：calc（25%-1rem）；
}
.左侧边栏{
浮动：左；
垫底：500雷姆；
保证金底部：-500雷姆；
}
梅因先生{
背景：粉红色；
宽度：计算（50%-4rem）；
浮动：左；
垫底：500雷姆；
保证金底部：-500雷姆；
}
.右边的边栏{
浮动：对；
垫底：500雷姆；
保证金底部：-500雷姆；
}
.页脚{
背景：黑色；
颜色：白色；
浮动：左；
明确：两者皆有；
页边顶部：1rem；
宽度：钙（100%-2rem）；
}

这是标题
这个侧边栏可以有菜单或类似的东西。它可能不具有与另一个相同的长度
这是主要领域。它应该与侧边栏具有相同的长度
这是另一个侧边栏，可能有一些广告
页脚区域

使用表格不是更容易吗？这个问题已经被问了很多次：，@Yordi使用表格作为表格数据，而不使用表格作为布局目的，即使这更容易（当您在将来的某个时候必须更改项目中的某些内容时，这就不那么容易了）。在2013年，你不应该依赖布局表，除非在极少数情况下，你的客户在中国有IE6/IE7（argh）客户，并且仍然需要为现代浏览器设计的复杂设计…@FelipeAls如果不是表格单元格，那又怎么样？因为列的宽度是固定的，通过给父元素一个蓝色和红色的bg图像，您可以很容易地伪造等高列。最好也设置父元素

#wrapper{display:table}

，以防某些浏览器会遇到隐式/阴影DOM父元素为表行和表但为+1的问题。兼容性IE8+谢谢FelipeAls。很高兴知道。@FelipeAls您能更具体地说明哪些浏览器有“问题”吗？我见过很多人这么说，但总是含糊其辞。当IE7还很新的时候，Opera/Firefox遇到了一些困难，但只有很长的页面。由于这些版本早已过时，当今唯一真正关心的是IE8，我从未见过IE8在匿名表/表单元格元素方面有任何问题。你能把它放在小提琴里吗？表是用来制表的，你失去了很多灵活性，例如我用我的方法在一个基于推特引导的网站上，我不可能修改twitter引导布局来添加表，我的解决方案非常灵活，你不需要修改你的html。不，看看投票最多的回复。HTML

s用于数据表，CSS

display:table

s用于制作网格布局。有时并不那么容易，检查一下这个例子：它看起来是一个完美的表格，但是检查HTML，你会发现你无法将它转换成类似表格的布局。我明白你的意思，如果可能的话，我会使用你的解决方案。如果你使用的是框架和/或具有灵活的响应布局和其他效果，js可能是最好的选择。这看起来可能要复杂得多，但总的来说，承认这种可能性是个好主意。感谢luisZavaleta花时间提供与其他人不同的解决方案。。！显示：带引导的表有点难以配置，至少对我来说，这似乎是最好的解决方案。只需设置一个全局类“.sameHeight”，并将其应用于单个包装器的每个子级，它就会像一个符咒一样工作。谢谢@Luiszavaletascheat，你刚刚改变了包装的颜色，它不起作用，。。。在这里，我添加了文字并改变了颜色，但它们的高度不同。。。这确实有效，但会切断div的底部边界（：

  function setEqualHeight(selector, triggerContinusly) {

    var elements = $(selector)
    elements.css("height", "auto")
    var max = Number.NEGATIVE_INFINITY;

    $.each(elements, function(index, item) {
        if ($(item).height() > max) {
            max = $(item).height()
        }
    })

    $(selector).css("height", max + "px")

    if (!!triggerContinusly) {
        $(document).on("input", selector, function() {
            setEqualHeight(selector, false)
        })

       $(window).resize(function() {
            setEqualHeight(selector, false)
       })
    }


}

    setEqualHeight(".sameh", true)