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

Question

I have a page with two divs on it which should fill the entire screen.

Both of them have width = 100%

The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.

The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.

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 do I do it with CSS?

Update:

I'm looking for a solution that would not require me to set the fixed height for the upper div.

Is that possible?

Answer 1

You should define fixed width for second div and use overflow css property to define scrollbars.

Answer 2

In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.

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

Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.

Answer 3

this should fix your problem

#header{ overflow: hidden }

#content{ overflow-y: auto }

edit: you have to define the height of the divs aswell

Answer 4

The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.

With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.

Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.