title: Inner DIV not expanding to 100% height
body: <p>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.  </p>
  
  <p>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. </p>
  
  <p>Here is my css:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>and html:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div class="topHeader_login"&gt;
  &lt;form method="post" action="/"&gt;
  &lt;div id="loginPage"&gt;
  &lt;div id="login_content"&gt;
  &lt;div id="login"&gt;
  &lt;div id="info"&gt;
  &lt;div style="text-align:center; padding-top:15px; float:left;"&gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="footerBg"&gt;
  </code></pre>