2 列等高 - Twitter 的 Bootstrap 2.0答案

【问题标题】：2 columns of equal height - Twitter's Bootstrap 2.02 列等高 - Twitter 的 Bootstrap 2.0
【发布时间】：2012-03-01 10:42:10
【问题描述】：

好吧，每个人都知道 Twitter 的 Bootstrap 是一个很棒的工具，对于像我这样对 CSS 还不太了解的人来说，它可以让很多事情变得更容易。但是，有时，这也可能是个问题。

问题是：我使用的是固定的 940 像素宽、12 列网格居中布局，有两列，我希望两列具有相同的高度。现在的代码是这样的：

<div class="container">
    <div class="content">
        <div class="row">
            <div class="span8 div-content">
                <div class="center95">
                    <div id="notWrap">
                        <div id="not">
                        </div>
                    </div>
                </div>
            </div>
            <div class="span4 div-sidebar">
                <div class="center90">
                    <div id="myPWrap">
                        <div id="myP">
                        </div>
                    </div>
                    <hr />
                    <div id="otherPWrap">
                        <div id="otherP">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer id="bottom" class="footer">
        <p>&copy;</p> 
    </footer> 
</div>

如您所见，有些 div 没有内容，例如“myP”、“otherP”和“not”。它们是通过 Javascript 填充的，存储在其中的内容量可能会有所不同，因此，在很多时候，一列（这里的“列”由具有“div-content”类的 div 和 div 表示与“div-sidebar”类）将比另一个更大（在我的特定情况下，两列可能是“较大的”）。

这是一张图片，如果有帮助的话：

基本上，左列（代码中的<div class="span8 div-content">）需要与右列（代码中的<div class="span4 div-sidebar">）大小相同，反之亦然。此外，如果有帮助，黄色部分是<div class="content">，白色背景是<div class="container">。 <div class="row"> 只是两列的容器，没有颜色。

我知道“具有相同高度的列”问题是 Web 程序员经常遇到的问题，但到目前为止我尝试的解决方案都没有奏效。我真的不喜欢“Faux Column 解决方案”，因为我是 CSS 的新手，我不想求助于这样的解决方法。如果可能的话，我宁愿坚持纯 CSS。

提前感谢那些愿意提供帮助的人。

【问题讨论】：

您查看过position: absolute; 和top: 0;bottom: 0; 吗？如果是这样，也许可以用边框或包装来伪造背景，并保持背景为白色。它只需要显示相同的高度。

标签： css twitter-bootstrap

【解决方案1】：

一直对我有用的是：

#myPWrap,#otherPWrap {
  overflow:hidden;
}

#myP,#otherP {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

您也可以尝试将换行转换为表格，将#myP 转换为表格列。

#myPWrap,#otherPWrap {
 display: table;
}

#myP,#otherP {
 display: table-cell;
}

【讨论】：

哦，我想我不是很清楚：必须具有相同大小的 div 是外部的，具有“div-content”类的一个和具有“div-sidebar”的一个“ 班级。类似的解决方案，还是改变了一切？
应该应用相同的解决方案
哪一个？第二个还是第一个 sn-p？

【解决方案2】：

我用一个自定义的 jQuery max 插件解决了这个问题：

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); 
}

这里 content-box 是我的内部列元素，content-container 是包含列的包装器：

$('.content-box').height(function () {
  var maxHeight = $(this).closest('.content-container').find('.content-box')
                  .max( function () {
                    return $(this).height();
                  });
  return maxHeight;
})

希望这会有所帮助。

【讨论】：