2列相等的高度 - Twitter的Bootstrap 2.0 [英] 2 columns of equal height - Twitter's Bootstrap 2.0

问题描述

大家都知道，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 =bottomclass =footer> 
< p>& copy;< / p> 
< / footer> 
< / div> 
  

可以看到，有没有内容的div，如myP，otherP 不。它们通过Javascript填充，并且存储在它们中的内容的量可以变化，并且因此，在许多时候列（这里的列由具有div-content类的div表示，并且由div与div-sidebar类）将大于另一个（在我的特殊情况下，两列可能是较大的一个）。

，如果有帮助：

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

我知道列相同高度的问题是一个经常性的问题为web程序员，但我尝试到目前为止的解决方案没有工作。我真的不喜欢人造柱解决方案，因为，因为我是CSS的新手，我不想呼吁像这样的解决方法。如果可能，我宁愿坚持使用纯CSS。

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

  
 ＃myPWrap，＃otherPWrap {
 overflow：hidden; 
} 
 
＃myP，＃otherP {
 margin-bottom：-99999px; 
 padding-bottom：99999px; 
} 
  

您也可以尝试将wrap换成一个表，一个表格。

 ＃myPWrap，＃otherPWrap {
 display：table; 
} 
 
＃myP，＃otherP {
 display：table-cell; 
} 
  

Well, everybody knows that Twitter's Bootstrap is a great tool and makes a lot of things easier for those who, like me, doesn't know much about CSS yet. But, sometimes, it can be a problem too.

The thing is: I'm using a fixed 940px-wide, 12-column grid centered layout with two columns, and I wanted that both of the columns had the same height. The code right now is like this:

<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>

As you can see, there are divs with no content, like "myP", "otherP" and "not". They are filled through Javascript, and the amount of content stored in them may vary and, because of that, in many times a column (The "columns" here are represented by the div with the "div-content" class and by the div with the "div-sidebar" class) will be bigger than the other (In my particular case, both columns may be "the bigger one").

Here's a picture, if it helps:

Basically, the left column (The <div class="span8 div-content"> in the code) needs to be the same size of the right column (The <div class="span4 div-sidebar"> in the code), and vice versa. Also, if it helps, the yellow part is the <div class="content"> and the white background is the <div class="container">. The <div class="row"> is just a container of the two columns and has no color.

I know that the "columns with same height" problem is a recurrent problem for web programmers, but the solutions I tried so far didn't worked. I really wouldn't like the "Faux Column solution" because, as I am a newbie in CSS, I didn't want to appeal to a workaround like this one. If possible, I'd rather stick to pure CSS.

In advance, thanks for those who'll be willing to help.

解决方案

The one that has always worked for me is:

#myPWrap,#otherPWrap {
  overflow:hidden;
}

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

You can also try to turn the wrap into a table and the #myP into a table col.

#myPWrap,#otherPWrap {
 display: table;
}

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

这篇关于2列相等的高度 - Twitter的Bootstrap 2.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！