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

我有2个div：#container和＃main-content，在它们下面是一个页脚，即使内容的高度为#main内容小于身高。

当我有很多内容时，一切都很好，但是当我只有几行文本时，只有#container div展开，＃main-content没有。

我尝试使用100％的高度来放置＃个主要内容，但不会扩展到其父级高度。内容div不会扩展到其容器的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%; 
}

来源

2012-04-03 fbartolic

您必须将min-height设置为main-content，因为默认情况下div永远不会展开高度，div是块级别的元素，默认情况下，展开宽度为100％。 – w3uiguru 2012-04-03 15:39:59

我试过了，它不起作用 – fbartolic 2012-04-03 15:47:30

你能告诉我们你的工作代码我的意思是网站 – w3uiguru 2012-04-03 16:06:30

你有没有尝试删除！

height: auto !important;

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

来源

2012-04-03 16:15:41 mddw

如果我这样做#container不会展开 – fbartolic 2012-04-03 16:17:35

奇怪，因为它应该工作：http://jsfiddle.net/NneAU/。容器是身体的孩子吗？ – mddw 2012-04-03 16:29:11

是的......是...... – fbartolic 2012-04-03 16:31:09

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

回答

相关问题