html - header height with fluid layouts

Question

Intro

I'm doing a website with fluid layouts (all container widths are expressed in %) for fitting all resolutions. It is ok and it looks nice in browser with small resolution, wide imac screen, tablet and mobile.

The layout

it has some coloumns and it is thoughts for a 1200px page. the layout is like this one:

The problem

But I have a problem with the header height. For now it is fixed:

#title {
    padding-top: 135px;
}

I'd like the header height change in base of the resolution but i don't know how to fix it.

If i use percentage for the height it is not clear on how it is calculated.. i should use html, body { height: 100%; } but what if the content is different from one page to another? and if the content overflow the viewport?

Answer 1

I dont know exactly why the % values does not work with height or other vertical properties.

What I do is to use media queries.

ex:

#title {
padding-top: 135px;
}
@media screen and (max-width=600px)
    #title {
    padding-top: 100px
    }
}

And so on with every screen size.

You can use some tool like webdeveloper toolbar to see how it display in several screen resolutions

Answer 2

I did it with some javascript and jquery:

    function resizeTitle() {
        var width = $(window).width();
        var h = width;
        $("header").css("height", h/8+"px");
        $("header #title").css("padding-top", h/14+"px");
    }
    $(window).resize(resizeTitle);
    resizeTitle();