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

Question

我有 2 个 div：#container 和 #main-content，它们下方是一个页脚，即使 #main-content 内的内容高度小于正文高度，页脚也需要看不见。
当我有很多内容时一切都很好，但是当我只有几行文本时，只有#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;

!important 删除你后面的 100% 样式。 必须为孩子 100% 的身高设置父母的身高。