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

Question

我有2个div：#container和#main-content，在它们下面是一个页脚，即使＃main-content中的内容高度小于body height，也需要看不见。
当我有很多内容时，一切都很好，但是当我只有几行文字时，只有#container div扩展，＃main-content不会。·
我尝试对＃main-content使用100％高度，但它没有扩展到它的父高度。

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

您是否尝试删除：

height: auto !important;

重要的是擦除你后者的100％风格。 父母的身高必须设置为100％的孩子才能工作。