CODEWITHSUNDEEP
jqueryhtmlcss
Deimantas
Deimantas

Reputation: 95

CSS - Height 100% Is bigger than the page

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

Upvotes: 3

Views: 903

Answers (2)

Jim VanPetten
Jim VanPetten

Reputation: 436

Well, you know height percentage is a tricky thing in css. Height looks to the parent container and on up until theres px or some tangible height measurment, then the % can be applied. In your example i started looking for the height and saw max of 100px but min of 1000px. I think thats a conflict.

Next, i'm thinking you dont know easily know the height of the screen, right? So you'll probably want to get this from jquery $(window).height()

then you set the height of the .content (minus 150px). var theHeight=$(window).height(); $(".content").height(theHeight)

Upvotes: 0

Kamaal ABOOTHALIB
Kamaal ABOOTHALIB

Reputation: 3548

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

Upvotes: 7

Related Questions