How to make a div to show scrollbars (without a fixed height)?

Question

I have a page with two divon it that should fill the entire screen.

Both have a width = 100%

The top height should be determined by its content (the minimum possible height corresponding to all content) and never show scrollbars.

The bottom should fill the rest of the screen. However, if its contents do not match the div, it should display a vertical scroll bar.

Like this:

<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>

How to do this with CSS?

Update:

I am looking for a solution that will not require me to set a fixed height for the top div.

Is it possible?

Answer 1

, , , - Javascript. , / JS, , CSS-.

JS onpropertychange div, , offsetHeight/clientHeight div. div position:absolute; bottom:0px;.

, JS, , CSS- , .

Answer 2

.

#header{ overflow: hidden }

#content{ overflow-y: auto }

edit: divs,

Answer 3

CSS, div, : auto.

.content {
    height:90%;
    overflow:auto;
}

, , div , . , div, .

Answer 4

div overflow css .

Answer 5

css - http://jsfiddle.net/TUwej/2/

#container { width:500px; border:3px solid red; margin:0 auto; position:relative; }

#sidebar { position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; }

#main { margin-left:150px; }

: () - 100%