Content div不会扩展到其容器的100％

Question

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.

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.

I tried using 100% height for #main-content but it doesn't expand to its parent height.

html:

<div id="container" class="cf">
    <div id="main-content" role="main" class="cf">

        <?php while ( have_posts() ) : the_post(); ?>

            <h2><?php wp_title(); ?></h2>
            <?php get_template_part( 'content', 'page' ); ?>
            <?php the_content(); ?>

        <?php endwhile; ?>
    </div><!-- #main-content -->
</div><!-- #container -->

css:

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%;
}

Answer 1

Did you try to remove :

height: auto !important;

The !important erase your latter 100% style. A parent's Height must be set for a child 100% height to work.