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

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"类会比另一个大(在我的特殊情况下,两列可能都是"更大的").

这是一张图片,如果它有帮助:

基本上,左列(<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转换为表格col.

#myPWrap,#otherPWrap {
 display: table;
}

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