使两列的高度相同 [英] Make two columns the same height

问题描述

我想用2列设计一个2列设计（使用

注意我添加了 display：table 和 display：table-cell 但也改变了css选择器名称，使其获得所需的优先级。

  .row-fluid {
 border：1px dotted gray; 
 display：table; 
} 
 .row-fluid .span2 {
 border：1px solid blue; 
 display：table-cell; 
 float：none; 
} 
 .row-fluid .span10 {
 min-height：100％; 
 border：1px solid red; 
 height：100％; 
 display：table-cell; 
 float：none; 
} 
  

I'm trying to make a 2 column design (using Twitter Bootstrap) with 2 columns of equal height.

Let's take this example:

<div class="row-fluid">
    <div class="span2">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <div class="span10">
        test
    </div>
</div>

​ Because .span2 is the highest of the two columns, it makes .row-fluid stretch to accommodate its height. After reading this article, I was expecting that setting min-height: 100% on .span10 would make it stretch to the full height, but it doesn't:

http://jsfiddle.net/WTNeB/1/

Why is that? Any solution to make .span10 stretch to its parent height, avoiding setting a fixed height, to keep this design flexible?

解决方案

Try this:

http://jsfiddle.net/WTNeB/2/

notice that i added display:table and display:table-cell but also I changed the css selector names so that it gets the priority needed.

.row-fluid {
    border: 1px dotted gray;
    display: table;
}
.row-fluid .span2 {
    border: 1px solid blue;
    display: table-cell;
    float: none;
}
.row-fluid .span10 {
    min-height: 100%;
    border: 1px solid red;
    height: 100%;
    display: table-cell;
    float: none;
}

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