CSS - Height 100% Is bigger than the page

Question

So the issue is that i have header and page content, i want to give the header a set height of 150px and give all the remaining space of the container, so i set it to be 100%. But when i do that, the container that contains header and page content increases it's height.

I don't want to use percentage for the header, and i want this to work on all sorts of screens (if possible).

Here's my code:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    min-width: 1000px;
    max-width: 100px;
    margin: auto;
}

#header {
    width: 100%;
    min-height: 150px;
    max-height: 150px;

}

.content {
    height: 100%;
}

i can also include jquery if needed

Answer 1

You can use css3 calc function, here is working example

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    min-width: 1000px;
    max-width: 100px;
    margin: auto;
}

#header {
    width: 100%;
    min-height: 150px;
    max-height: 150px;

}

.content {

    height: calc(100% - 150px);
}

and you can check browser support, JSBin Demo