【问题标题】：CSS - Equal Height Columns?CSS - 等高列？
【发布时间】：2011-01-08 01:21:09
【问题描述】：

在 CSS 中，我可以这样做：

但我不知道如何将其更改为：

这可以通过 CSS 实现吗？

如果是，如果不明确指定高度（让内容增长），我该怎么做？

【问题讨论】：

不，很有可能。我用两种不同的方法完成了它。第一个是效果，但极其复杂。将另一个作为链接发布。
其实我觉得this way简单多了。我忘记了什么？
简单。简单。 Equal Height Columns with Flexbox.

标签： css html

【解决方案1】：

网格

现在，我更喜欢网格，因为它允许将所有布局声明保留在父级上，并默认为您提供等宽的列：

.row {
  display: grid;
  grid-auto-flow: column;
  gap: 5%;
}

.col {
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

弹性盒

如果您希望孩子控制列宽，请使用 Flexbox：

.row {
  display: flex;
  justify-content: space-between;
}

.col {
  flex-basis: 30%;
  box-sizing: border-box;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

【讨论】：

+1 此外，查看这个有用的链接，其中包含 flexbox 功能的完整列表css-tricks.com/snippets/css/a-guide-to-flexbox
@Towfiq flexbox 没有，表格布局有。答案尽在其中。
@RokoC.Buljan 不。至少在 Safari 9 中没有。打开演示并尝试以下操作：如果我将宽度设置为 100%，则第三列会比前两列大。
@Pavlo 我在 Safari(5) 中看到了这个问题。极好的。完全没有逻辑意义，为什么第二个单元格会如此狭窄......谁在构建这些浏览器？删除了我之前的评论以防止噪音。感谢您的回复。向上+d。
@Pavlo 的重点是，他们似乎从那以后并没有移动太多；)

【解决方案2】：

Yes.

这是文章使用的完整 CSS。 reading the entire article 非常值得，因为作者一步一步地介绍了完成这项工作所需的内容。

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

这不是唯一的方法，但这可能是我遇到的最优雅的方法。

还有另外一个网站就是完全用这种方式完成的，viewing the source will allow you to see how they did it。

【讨论】：

很好，找到了！我想你的意思是matthewjamestaylor.com/blog/…
所有这些都不会使列的高度相同，这只是一种错觉。我真正想知道的是如何在没有 JS 的情况下使它们具有相同的高度。
@vsync：如果你想让它们的高度一样，就让它们的高度一样。对于大多数布局来说，“错觉”是足够的并且可以接受的。 Html/Css 是一种有限的标记语言，因此在您不得不依赖其他工具之前，它只能做很多事情。
你听说过 css 吗？ “flex-box” 甚至是 display:table.. 只是很难保持对旧 IE 的支持。但总有办法
这个答案正在 meta 讨论：meta.stackoverflow.com/questions/275584/…

【解决方案3】：

给容器overflow: hidden，给列大（和相等）负边距和正内边距。 Note that this method has some problems, e.g. anchor links won't work within your layout.

标记

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

The Result

【讨论】：

我刚刚测试过，看来你可以！很酷，我唯一能指出的负面因素是蓝色背景，我想我需要眼镜......文字太模糊了。
@Alix：如果蓝色背景对于代码示例来说太可怕了，您可以阅读完整的 Lorem ipsum here :-)
这不会使它们的高度相等。这只会使背景看起来像等高，但容器不是……
@vsync：没错，但这通常是我们想要的结果，而且比其他方法的障碍要小得多。
我真的很想知道什么时候真正要解决的问题是相等的高度，因为如果内容相等，那么高度就会相等，并且将东西放在底部将适用于相对定位到容器元素。这个答案是我来这里时一直在寻找的，所以干杯。

【解决方案4】：

您可以使用 CSS 表格，如下所示：

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>

【讨论】：

一些浏览器不支持。
看起来很有希望，/我试试看。
@Joel Coehoorn：你知道哪些吗？知道会很有用。
@Alix - 我确定 IE6/7 不支持 display:table - 如果您不使用显式表格、行和单元格（例如，使用匿名元素），其他人会遇到问题（digital-web.com/articles/everything_you_know_about_CSS_Is_wrong）等）
@Alix - 关于跨浏览器问题的一些参考：quirksmode.org/css/display.html#table

【解决方案5】：

您可以使用以下 JavaScript 轻松做到这一点：

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};

【讨论】：

破解它，直到 CSS 表格成为常态：D
到目前为止，CSS 表格似乎不会成为常态。
哈，确实是啊？！为了后代，我们应该把它留在这里吗？
我们当然应该。

【解决方案6】：

现代方式：CSS Grid。

HTML：

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS：

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

实时示例是here。

repeat(auto-fit, minmax(200px, 1fr)); 部分设置列宽。每列占用可用空间的 1 分之一，但不能小于 200 像素。它没有缩小到 200px 以下，而是包裹在下面，因此它甚至是响应式的。您也可以有任意数量的列，而不仅仅是 3 个。它们都非常适合。

如果您只需要 3 列，请改用 grid-template-columns: repeat(3, 1fr);。您仍然可以拥有更多元素，它们会换行、响应式，但始终放置在 3 列布局中。

MDN 或 css-tricks 上有关 CSS 网格的更多信息。

它干净、易读、可维护、灵活且易于使用！

【讨论】：

【解决方案7】：

你可以试试...它适用于我和所有浏览器兼容...

<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>

【讨论】：

【解决方案8】：

另一种选择是使用解决此问题的框架。 Bootstrap 目前没有等高选项，但 Zurb 的 Foundation 有，你可以在这里看到它是如何工作的：http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

以下是您如何使用它的示例：

<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
</div>

基本上，他们使用 javascript 来检查最高的元素并使其他元素的高度相同。

所以，如果你只想要 css，这会添加更多代码，但如果你已经在使用框架，那么他们已经解决了这个问题。

愉快的编码。

【讨论】：

【解决方案9】：

使用 Flexbox 创建等高的列

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* When Screen width is 400px or more make the columns stack next to each other*/
@media screen and (min-width: 400px) {
  .row > .column {    
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
</div>

【讨论】：

欢迎来到 SO！当你用代码回答问题时，试着稍微解释一下。在这种情况下，有更多的答案，所以暴露优点。

【解决方案10】：

响应式回答：

CSS flexbox 很可爱，但今天删除 IE9 用户有点疯狂。截至 2015 年 8 月 1 日，我们的物业：

3% IE9
2% IE8

删除那些显示 5% 的页面损坏？疯了。

使用媒体查询的方式与 Bootstrap goes back to IE8 和 display: table/table-cell 一样。所以：

http://jsfiddle.net/b9chris/bu6Lejw6/

HTML

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

在这种情况下，我使用 400px 作为列和垂直布局之间的切换，因为 jsfiddle 窗格的趋势非常小。弄乱那个窗口的大小，你会看到列很好地重新排列，包括当它们需要成为列时拉伸到全高，这样它们的背景颜色就不会在页面的中途被切断。没有疯狂的填充/边距黑客会撞到页面上的后续标签，也不会将 5% 的访问者扔给狼。

【讨论】：

【解决方案11】：

这是我刚刚在 SASS 中编写的一个示例，其中列间距和列数量（变量）可变：

CSS：

.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.fauxer {
  overflow: hidden; }

.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }

.fauxer > div > div {
  display: table-row; }

.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }

<div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>

注意：我只是有时间在一些新的浏览器中测试它。请在使用前好好测试一下:)

您可以在此处获取 SCSS 中的可编辑示例：JSfiddle

【讨论】：

虽然您的努力看起来很勇敢，但这绝不是跨浏览器兼容的。