html - 使浮动div具有相同的高度

Question

我有 2 个并排的 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;
}

score 26 · Accepted Answer

您可以尝试使用浮动而不是使用display: table-cell. 但是，您可能会发现一些较旧的浏览器不理解此规则。见下文：

#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;
}

score 5 · Accepted Answer

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/

score 2 · Accepted Answer

我建议阅读这篇文章，它解释了如何做你想做的事情。我会放一个小提琴来显示，但它相当广泛和纯粹的 css。http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

如果需要，您可以查看此代码笔。我包括了一个页脚区域，因为这是我需要的东西，而且它需要更多的技巧。

.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>

score -3 · Accepted Answer

通过使用这个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
}

html - 使浮动div具有相同的高度

6 回答 6

Related

Reference