Why does my <div> not expand to height:100%?

Question

I have 3 divs that correspond to this.

I have #wrapper which wraps around everything. That is #EEE I have #contain which is inside #wrapper right after. That is #FFF (part with the content)
I have #secondaryContent which is height:100% perfectly fine, position:fixed. which is inside both of those divs.

I added borders to all the main divs to see what's up.

Okay so, the bottom of the middle div is supposed to extend to the bottom at 100% showing no grey from the wrapper. If you look closely at the top of the page You can see a purple line. That's actually a div called #content, which is supposed to have all of the posts in it. I don't know what it's showing as if there's nothing in it but it should //(* fixed * - see second answer).

You can see what I mean via my server.

Server

FIX***
the class '.container' that is applied to the #wrapper div is what screwed everything up.

Answer 1

You need to set your body to have a height: 100% otherwise it will not take up the full screen.

EDIT: Sorry I answered before viewing the site. If it's not taking up the full height have you checked for excess margin or padding?

Answer 2

I think this is because there are floats in the #Content div.

You can add this class "hasFloats" to both your css file and in the #content div as well.

UPDATED

.hasFloats { _height: 1%; }

.hasFloats:after { content: "."; visibility: hidden; display: block; clear: both; height: 0; font-size: 0; }

<div id="content" class="hasFloats">

hope this helps.

Answer 3

There is a class called 'container' that is applied to the div 'wrapper'. This class container is from a different stylesheet provided by the Habari CMS I use. By removing this class from the div, the height now expands to the document window.