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

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.