CSS Relative sized header/footer

Question

I'm not a CSS expert so I might be missing something obvious. I'm trying to set a relative size header and footer (so that on larger monitors, the header and footer are larger than on smaller screens). To do this, I'm using a percentage height. However, this only works if I set the position to absolute. The problem is, setting it to absolute means that it overlaps the main part of the screen (inbetween the header and footer). Setting it to relative doesn't work since it relies on items being inside the header/footer. This is what my header looks like:

.header
{
    position:absolute;
    top:0px;
    background-color:white;
    width:100%;

    height:30%;

}

the ASPX page simply contains

<div class="header"></div>

Is there a way to get relatively proportioned header and footers?

Thanks

Answer 1

In order to have elements take a percentage height, you need to define the HTML and BODY to have a defined height as well. Since you don't know what this is, use 100%.

html, body {
    height:100%;
}