html - 调整第二个 div 高度

Question

我在一个父 div 中有两个 div。

两个 div 将占据其父级的完整宽度。

第一个 div 有固定的高度，我不想给第二个 div 高度，它应该自动占据父级的剩余高度[我只想在 css 中这样做]。

下面是 jsfiddle 链接: http://jsfiddle.net/x3ebK/3/

这是html代码:

<div id="content">
    <div id="col1">content</div>
    <div id="col2">content</div>
</div>

我需要这方面的帮助。

我已经更新了下面的 js fiddle，我希望“col2”占据内容 div 的剩余高度

http://jsfiddle.net/x3ebK/32/

Answer 1

像这样使用 display:table 而不是 float 更方便:

演示:http://jsfiddle.net/x3ebK/28/

HTML:

<div id="content">
    <div>
    <div id="col1">content</div>
    <div id="col2">content<br /><br /><br />content</div>
    </div>
</div>

CSS:

#content {
    height:auto;
    position: relative;
    width:300px;
    background:#ccc;
    color:#fff;
    display:table;
}
#content > div{
    display:table-row;
}
#col1 {
   width: 30%;
   background:#ff0000;
   display:table-cell;
}
#col2 {
    width: 70%;    
    background:#000fff;
    display:table-cell;
}

您可能想阅读这篇文章: http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

希望这对您有所帮助。