ansaurus

Question

CSS: 100% height content area with variable-height header

Answer 1

+1 A:

if you want the header to change size, use a relative height. The content will already fill the viewport vertically.

CrazyJugglerDrummer 2009-08-04 00:36:33

The content panel will only fill the viewport if there is enough "content" inside it to stretch it that tall. I want its height to at minimum be the height of the viewport minus the height of the header, even if it is an empty element.

Annabelle 2009-08-04 16:20:45

Answer 2

A:

You can try using the min-height CSS property on the header, content and footer.

e.g.

.header-footer 
{
    min-height: 20%;
}

.content
{
    min-height: 80%;
}

Make sure that you set both <html> and <body> tags to have a min-height: 100% that way you can fill up the entire viewport.

This should allow for the page to expand as needed but stay at a minimum of 100%.

Thanks

mlevit 2009-08-04 06:00:40

The problem with min-height is it doesn't actually set the height of the element, so you can't add something to .content with a height of 100% and have it fill .content.What I really need is a solution that I can nest within itself. I've edited my question to that effect.

Annabelle 2009-08-04 17:04:55

Answer 3

+1 A:

Ok so the min-height CSS property doesn't work :)

I played around with an actual HTML file now and I believe I found a way.

.header-footer
{
 height: 10%;
 background-color: lightYellow;
 display: table;
 width: 100%;
}

.container
{
 margin-left: auto;
 margin-right: auto;
 height: 80%;
 width: 100%;
 display: table;
}

.inner
{ 
 background-color: lightPink;
 height: 100%;
}

We use the display: table property to make sure each <div> sits nicely under and over the other ones.

NOTE: You have to set a height property for each of the elements on the page. It doesn't have to be as large as 10% that I chose, but at least something. Once the content is inserted into the element that is larger than the height value it should expand.

I've created two seperate HTML pages for you to examine to see if this suits you:

Hopefully this is what you're looking for.

Thanks

mlevit 2009-08-05 00:12:40

Given that IE6 and IE7 don't support display: table, I was amazed to see that this still worked in IE6 - there is a vertical scroll bar scrolling a few pixels, but I bet that's just default padding getting in the way. Is the display setting really necessary? I will have to play around with this some when I have more time.

Annabelle 2009-08-05 21:58:56

The `display: tables` makes sure each div acts as if it was a table. If you don't have it then it doesn't force the div to expand as the content expands inside it.If you use Firebug (a Firefox add-on) then you can disable the `display: table` property on my test pages and see for yourself.

mlevit 2009-08-05 23:02:07

ansaurus

tags:

views:

answers:

CSS: 100% height content area with variable-height header

related questions