CSS Relative sized header/footer

Question

Hi 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

To use percentage heights the parent needs to have a fixed height, because if the parent is height auto then it will depend on the height of the child content....which depends on the parent height etc. I think when you set the position to be absolute it takes the screen viewport as the parent element which does have a fixed size (theory by me), which is why it works with absolute.

I don't think its a good idea to try and do the proportional header and footer based on the browser resolution. It really doesn't make much sense to me, honestly, you're going to need to try and scale up and down the font sizes or images you have in the header to match etc. If you really want I would suggest having different CSS stylesheets which users can choose (or is selected automatically by javascript). This way if someone has a huge resolution they can choose the larger one if they want (or its automatically chosen for them). That way you don't have to deal with any scaling issues.

Answer 2

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%;
}