adjust second div height

Question

I have two divs inside a parent div.

both divs will occupy complete width of its parent.

first div has fixed height and I don't want to give height for second div, it should automatically occupy remaining height of the parent[I want to do this in css only].

below is jsfiddle link: http://jsfiddle.net/x3ebK/3/

here is the html code:

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

I need help in this.

I have updated the js fiddle below in below, I want "col2" to occupy remaining height of content div

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

Answer 1

It is convenient to use display:table rather than float like this:

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

You might want to read this article : http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Hope this helps.

Answer 2

Is this what you are trying to achieve?

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

Try applying:

position: absolute; and height: 100%; to #col1

and

height: 100%; to #col2

Here is the updated fiddle: http://jsfiddle.net/nqYAp/

Answer 4

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