Question

嗯，大家都知道Twitter的Bootstrap是一个很棒的工具，对于那些像我一样对CSS还不太了解的人来说，很容易做很多事情。但是，有时，它也可能是一个问题。

问题是：我使用固定的940px宽，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>

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

这是一张图片，如果它有帮助： project-pic

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

我知道“高度相同的列”问题对于网络程序员来说是一个经常出现的问题，但到目前为止我尝试的解决方案都没有用。我真的不喜欢“Faux Column解决方案”，因为我是CSS的新手，我不想吸引像这样的解决方法。如果可能的话，我宁愿坚持使用纯CSS。

事先，感谢那些愿意帮助的人。

Answer 1

一直对我有用的是：

#myPWrap,#otherPWrap {
  overflow:hidden;
}

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

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

#myPWrap,#otherPWrap {
 display: table;
}

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

Answer 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;
})

希望这有帮助。

2列相同的高度 - Twitter的Bootstrap 2.0

2 个答案: