保持相同高度的列答案

【问题标题】：Keep columns with same height保持相同高度的列
【发布时间】：2014-11-05 12:30:24
【问题描述】：

我正在尝试使用display: table 保持两列的高度相同。我做了什么：

.col-sm-12
   aside
   .main-content

还有 CSS

.col-sm-12{
  display: table;
  height: 100%;
}

aside{
  display: table-cell;
  height: 100%;
  width: 25%;
  background: green;
}

.main-content{
  display: table-cell;
  height: 100%;
  width: 75%;
}

工作正常。但是，当我将内容添加到一旁时，内容会落到底部。

【问题讨论】：

你很遗憾需要 js。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

首先，您应该使用 Bootstrap 网格而不是百分比宽度。

也就是说，要让两个浮动（和动态）列具有相同的高度，您可以使用以下技巧：

在父列上设置overflow: hidden
在列中添加margin-bottom: -5000px; padding-bottom: 5000px

工作示例（我使用 -xs 而不是 -sm 仅用于示例目的）：

.wrapper {
  overflow: hidden;
}
aside{
  background: forestgreen;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}
.main-content{
  background: tomato;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12">
  <div class="row wrapper">
    <aside class="col-xs-3">
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
    </aside>
    <div class="col-xs-9 main-content">
      Main content<br>
      Main content<br>
      Main content<br>
      Main content<br>
      Main content<br>
    </div>
  </div>

【讨论】：

【解决方案2】：

将元素的高度设置为 100% 并不总是有效，因为它会针对该大小查看其父对象。

这是我的建议：

html：

<div class="row">
    <div class="col-xs-4 tall">25%</div>
    <div class="col-xs-8 tall">75%</div>
</div>

css：

.tall {
    border: 2px dotted black;
    height: 200px;
}

小提琴： My Solution

【讨论】：

【解决方案3】：

此方法使用边距、填充和溢出来强制列的高度相等。该方法需要在每个浮动元素的底部设置足够大的填充，并在相同元素的底部使用相等的负边距来抵消它。诀窍是将父容器上的溢出设置为隐藏。

这里是 HTML 和 CSS：

<div class="main">
<div class="container clearfix">
    <div class="content">
        <section>
            <h1>This is the Main Content</h1>
            <hr>
            <h2>A sub heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur...</p>
        </section>
    </div>
    <div class="sidebar">
        <aside>
            <h2>This is a sidebar</h2>
            Sign up to the newsletter!
        </aside>
    </div>
</div><!-- /.containter -->

.main .container {
    padding-right: 330px;
    overflow: hidden;
}
.content {
    float: left;
    width: 100%;
    background-color: orange;
}
.sidebar {
    float: right;
    margin-right: -330px;
    width: 300px;
    background-color: olive;
}
.content,
.sidebar {
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}
section,
aside {
    padding: 30px
}

这可以扩展到多行以获得更像网格的布局，而不仅仅是两列。如果需要，您还可以使用流体宽度列。

这里是js小提琴Demo

参考链接 http://knowwebdevelopment.blogspot.in/2014/10/css-equal-height-columns-three.html

【讨论】：