CODEWITHSUNDEEP
htmlcss
shenn
shenn

Reputation: 889

Inner DIV not expanding to 100% height

I have a couple of pages that seem to cause some conflicting results. I have a login page that should have a background of gray, and then my inner pages have a background of white. But the div with id="loginPage" doesn't stretch the entire height of the "container" div. Therefore the loginPage div is gray but the space leftover for the container div is still white.

Now, the main container has a min-height because I have a couple pages with a large amount of content. When I set it to only height:100%, the footer isn't on the bottom of the page. But once I had set it to min-height it drops to the bottom of the page.

Here is my css:

html, body { height: 100%;}

#loginPage {
    width:100%;
    height:100%;
    float:left;
    background-color:#F7F7F9!important;
}
    #container
{
    min-height:95%;
    position: relative;
    background:white;
}
.footerBg
{
     width:100%;
     padding-top:10px;
     margin:0;
     position:relative;
}

and html:

<div id="container">
<div class="topHeader_login">
<form method="post" action="/">
<div id="loginPage">
<div id="login_content">
<div id="login">
<div id="info">
<div style="text-align:center; padding-top:15px; float:left;"> </div>
</div>
</div>
</form>
</div>
<div class="footerBg">

Upvotes: 0

Views: 1596

Answers (2)

Pevara
Pevara

Reputation: 14310

I think you may want to have a look at this: http://ryanfait.com/sticky-footer/

It explains how you can keep your footer always on the bottom of your page, even if the content is smaller, and it never adds scrollbars if they are not nessecary. You could then just add your 'grey' background color to the page wrapper.

Upvotes: 1

Eric Goncalves
Eric Goncalves

Reputation: 5353

If you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined.

source: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

try giving form { height: 100% }

take a look at this fiddle, I cleaned up your html and css

Upvotes: 0

Related Questions