CODEWITHSUNDEEP
htmlcss
Bert Bear
Bert Bear

Reputation: 101

Make Page Content 100% Height of Document - Painful Issue

I am working on the second version of my new web app Trekeffect and I want my interface content to be 100% of the pages height, but I just can't seem to figure it out. I make the HTML, body and all other parent elements 100% height, but no matter what I do the height never fills the document.

This screenshot shows my issue: enter image description here

You can view the issue by visiting: http://dev.trekeffect.com/home and then by clicking on any of the cities listed: Example: Anchorage, Alaska

I've played around in Firebug and no matter what I do I can't get this working. Please help!

Upvotes: 1

Views: 1460

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240978

It is because of this:

html, body {
    height: 100%;
}
.three_col .right {
    height: 100%;
}

Remove those, and your problem is solved!

The reason this is causing a problem, is because CSS sets the body to a height of 100% of the available screen space.. Therefore any content below this is considered overflow.

enter image description here

Upvotes: 3

Related Questions