Question

I’m trying to make a full page DIV that holds all my content but expands when other divs are larger than the screen size and it wont auto expand you can view the website at http://molly.everythingcreative.co.uk (sorry the background images haven’t been sized yet so files are quite large). I was currently using the Stickyfooter code to make the DIV stay full screen but it seems it causes a gap at the bottom of the page on either resize or expanding of DIVS:

#global_main_frame {
    width: 350px;
    height: auto !important;
    min-height: 100%;
    top: 0;
    bottom: 0;
    position: relative;
    padding: 0 50px 0px 50px;
    float: left;
    left: -600px;
    background-color: rgba(0,0,0,0.8);
    z-index: 200;
}

Example

<div id="global_main_frame">
<!-- All the other DIV's -->
</div>

Answer 1

It’s the clearfix class on the #global_main_frame element that is causing the gap. If you change the visibility style rule on the clearfix class to visible you can see the dot that is inserted below your full screen div to clear the float.

To remove the gap you can either add font-size: 0 to clearfix, or remove the clearfix class from the #global_main_frame element (it’s not needed when the container is the body element).