使浮动的div高度相同

Question

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

我制作了一个 fiddle 来展示。我希望红色和蓝色的 div 具有相同的高度...

http://jsfiddle.net/7RVh4/

这是 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;
}

- Moshe Shaham

---

使用表格不是更容易吗？ - Yordi

这个问题已经被问过多次：1，2，还有很多... (http://stackoverflow.com/search?q=float+same+height) - Marcel Gwerder

对于表格数据，请使用表格，不要将表格用于布局目的，即使这样做更容易（在未来的某个时候您需要更改项目时就不会那么容易了）。在2013年，您不应该依赖于布局表格，除非您的客户在中国有IE6 / IE7（啊）的客户，并且仍然希望使用专为现代浏览器设计的相对复杂的设计... - FelipeAls

@FelipeAls，如果不是表格单元格，那还有什么？ - Moshe Shaham

由于列具有固定的宽度，您可以通过为父元素提供蓝色和红色背景图像来轻松伪造等高列。 - Matt Coughlin

Answer 1

你可以尝试使用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;
}

- antony

---

为避免某些浏览器在隐式/影子DOM父元素为table-row和table时出现问题，最好也将父元素#wrapper { display: table }设置为表格显示。尽管如此，也要注意兼容IE8+。 - FelipeAls

谢谢FelipeAls。好知道。 - antony

@FelipeAls 你能具体说明一下哪些浏览器有“问题”吗？我见过很多人这样说，但总是含糊其辞。Opera/Firefox在IE7还很新的时候确实有些困难，但只是在处理非常长的页面时。由于那些版本早已过时，现在唯一真正需要关注的是IE8，而我从未见过IE8在处理匿名表格/表格单元元素时出现任何问题。 - cimmanon

你能把它放入JSFiddle中吗？ - antony

Answer 2

Antony的回答可以正常工作，但是你需要所有的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) 

http://jsfiddle.net/83WbS/2/

- luisZavaleta

---

表格是用来制作表格的，但你会失去很多灵活性。例如，我在一个基于 Twitter Bootstrap 的网站中使用我的方法，如果要添加表格，就无法修改 Twitter Bootstrap 的布局。我的解决方案非常灵活，您不需要修改 HTML。 - luisZavaleta

不，看一下得票最高的回答。HTML的<table>标签是用于数据表格的，而CSS的display:table属性则是用于制作网格布局的。 - user764357

有时候并不是那么容易，以这个为例：http://goo.gl/X2GAER 看起来是一个完美的表格，但是检查一下HTML代码，你会发现无法将其转换为类似表格的布局。但我理解你的意思，如果可能的话，我会采用你的解决方案。 - luisZavaleta

如果您正在使用框架和/或具有其他效果的灵活响应式布局，则JavaScript可能是最好的选择。它可能看起来更加复杂，但通常承认这种可能性是一个好主意。感谢luisZavaleta花时间提供与众不同的解决方案..！ - Fei Lauren

显示：使用Bootstrap的表格有点难以配置，这似乎是我至少最好的解决方案。只需设置一个全局类“.sameHeight”，并将其应用于单个包装器的每个子元素，它就可以完美运行。感谢@luisZavaleta。 - TechYogi

Answer 3

我建议阅读这篇文章，它解释了如何做你正在尝试的事情。我会放一个演示链接，但它非常复杂且纯CSS。 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

- Cam

Answer 4

我想指出一个更简单的解决方案。在列上使用大的padding-bottom: 500em和相同数量的负margin-bottom:-500em，而包装器只需使用overflow:hidden来将列裁剪到正确的大小。

在这里找到： HTML/CSS：使两个浮动div具有相同的高度

- Hexodus

---

这确实有效，但会剪切 div 的底部边框 (: - Kinaeh

Answer 5

正如Hexodus所指出的，您可以使用padding-bottom和margin-bottom，但更好的解决方案是使用flexbox或grid。

如果您想要，您可以查看codepen。我包括了一个页脚区域，因为这是我需要的东西，它需要一点点更多的hack。

.section {
  width: 500px;
  margin: auto;
  overflow: hidden;
  padding: 0;
}

div {
  padding: 1rem;
}

.header {
  background: lightblue;
}

.sidebar {
  background: lightgreen;
  width: calc(25% - 1rem);
}

.sidebar-left {
  float: left;
  padding-bottom: 500rem;
  margin-bottom: -500rem;
}

.main {
  background: pink;
  width: calc(50% - 4rem);
  float: left;
  padding-bottom: 500rem;
  margin-bottom: -500rem;
}

.sidebar-right {
  float: right;
  padding-bottom: 500rem;
  margin-bottom: -500rem;
}

.footer {
  background: black;
  color: white;
  float: left;
  clear: both;
  margin-top: 1rem;
  width: calc(100% - 2rem);
}

<div class="section">
<div class="header">
  This is the header
</div>
<div class="sidebar sidebar-left">
  This sidebar could have a menu or something like that. It may not have the same length as the other
</div>
<div class="main">
  This is the main area. It should have the same length as the sidebars
</div>
<div class="sidebar sidebar-right">
  This is the other sidebar, it could have some ads
</div>
<div class="footer">
  Footer area
</div>
</div>

- Adriano_Pinaffo

Answer 6

你可以不使用表格，而是利用this CSS 技巧来实现。

示例 - http://jsfiddle.net/LMGsv/

HTML

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

CSS

#wrapper {
    float:left;
    width: 300px;
}
#columns {
    float:left;
    width:300px;
    background:blue;
}
#left {
    float:left;
    width:50px;
    background: blue;
}
#right {
    width:250px;
    background: red;
    float:left
}

- user2313440

---

作弊了，你只是改变了外包装的颜色。 - Neo

它不起作用，我添加了文本并更改了颜色，它们的高度不相同... http://jsfiddle.net/prfveqdm/ - Mathieu J.