CODEWITHSUNDEEP
htmlcss
Jere
Jere

Reputation: 1266

height:100% overfills the content

I have a page with a header (with dynamic height!) and a content. The content should fill out the rest of the page - even if it has not enough text in it.

So far it's a question which is asked many times and is always answerd with something like code I've tried:

html, body {
  height: 100%;
}
.header {
  height: 50px;
  background-color: #ff0;
}
.content {
  min-height: 100%;
  background-color: #ccc;
}

my problem is that with this code the height of the .content does not just fill out the rest of the page but it has something like the screen size as height. However with this code I have to scroll to see the bottom of the .content.

the code: http://jsbin.com/bilux/1/edit

At the moment there appears a scroll bar when I set the .content height to 100%:

image with the problem

edit:

thanks for the ways to solve that for a static header height! But isn't there a way to do that without knowing the height of my header?

Upvotes: 0

Views: 42

Answers (3)

King King
King King

Reputation: 63317

You can use the calc function like this:

.content {
 min-height: calc(100% - 50px);
 background-color: #ccc;
}

Also note that the default margin of body may make unexpected result, you should also reset it to zero.

Working demo.

UPDATE: If you want it more dynamic, I'm sure you can try using flex-box layout, but it's still not supported widely (just the latest versions of the most modern browsers. For older browsers you should add libraries like prefixfree). Another solution is you can try using table-layout for the header like in this updated demo.

Upvotes: 3

WASasquatch
WASasquatch

Reputation: 1044

You're using 100% of the page, while other elements use up some of that space. Trim down your percentage based on the space used. For example, on my website it needs 92%

The WIDTH and HEIGHT element is based on the BODY of the page (which is based on the HTML of the page), and not the space it has available. So 100% is 100% of the on-screen space. While other elements on the page may use 10% of that space, and push the content to 110%.

It's the same concept when your page fills with content, and you get a scrollbar. The height of the body is growing based on the height of the content areas container holding the growing content.

Upvotes: 1

Linek
Linek

Reputation: 1363

absolute positioning might be the answer. Depends on the structure of your entire page. Check it out http://jsbin.com/qeveroci/1/edit

Upvotes: 0

Related Questions