CODEWITHSUNDEEP
jquerycsshtml
Joseph Gregory
Joseph Gregory

Reputation: 589

100% Height Div Issue

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>

Upvotes: 1

Views: 94

Answers (1)

Alex
Alex

Reputation: 1599

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).

Upvotes: 2

Related Questions