title: Content div won't expand to 100% of its container
body: <p>I have 2 divs: #container and #main-content, beneath them is a footer which needs to be out of sight even if the height of the content inside #main-content is smaller than body height.<br><br>
  Everything is fine when I have a lot of content, but when I have only a few lines of text only the #container div expands,#main-content doesn't.<br><br>
  I tried using 100% height for #main-content but it doesn't expand to its parent height.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="container" class="cf"&gt;
      &lt;div id="main-content" role="main" class="cf"&gt;
  
          &lt;?php while ( have_posts() ) : the_post(); ?&gt;
  
              &lt;h2&gt;&lt;?php wp_title(); ?&gt;&lt;/h2&gt;
              &lt;?php get_template_part( 'content', 'page' ); ?&gt;
              &lt;?php the_content(); ?&gt;
  
          &lt;?php endwhile; ?&gt;
      &lt;/div&gt;&lt;!-- #main-content --&gt;
  &lt;/div&gt;&lt;!-- #container --&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body { 
     width: auto; 
     height: 100%;
  }
  
  html {
     height: 100%;
  }
  
  #container {
     width: 1180px;
     margin: 0 auto;
     height: auto !important;
     min-height: 100%;
     height: 100%;
  }
  
  #main-content {
      background: white;
      width: 850px;
      height: 100%;
  }
  </code></pre>