Carter Carter - 9 days ago 4
CSS Question

How do I have a fixed height header with a content div that takes up 100% of the remaining space?

Before I start, I know there are a lot of questions on here related to this, but I feel like the answers are seriously lacking. They at least aren't making sense to me, or they don't accomplish what I want. If you know of question with a solid solution that this duplicates, I simply missed it; I will delete this one.

If I have the following HTML...

<div id="header"></div>
<div id="content"></div>

How, in simple terms, can I make the header take up 50px of the view port's height and make the content portion fill the rest of the view port's height with no scrollbar? Ideally this would work in IE6 and without tables. Thanks!


this seems to work for me:

        <div style="height:60px; position:fixed; width:100%;"></div>
        <div style="height:100%; width:100%;">
            <p style="padding-top:60px;">hola</p>