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小提琴，我希望“col2”占据内容div的剩余高度

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

Answer 1

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

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

希望这有帮助。

Answer 2

这是你想要实现的目标吗？

Have a fiddle!

CSS

html,body { height: 100%; }

#content {
    height:100%;
    position: relative;
    width:300px;
    float:left;
    background:#ccc;
    color:#fff;
}

#col1 {
    width: 30%;
    background:#ff0000;
    float:left;
    height:50px;
}

#col2 {
    width: 70%;    
    float:right;
    background:#000fff;
    height:100%;
}

Answer 3

尝试申请：

position: absolute;和height: 100%;到＃col1

和

height: 100%;至＃col2

这是更新的小提琴：http://jsfiddle.net/nqYAp/

Answer 4

试试这个#container{ height:100%} #col2 { height:inherit }

调整第二个div高度

4 个答案: