孩子DIV不会显示在家长DIV

里面好吧，我的问题是#main_content是#content的孩子，但它不会在#content中显示。我需要#content垂直扩展到＃main_content的大小。此外，＃内容是#main_wrap的一部分，它应该一直延伸到#footer。任何帮助将不胜感激。孩子DIV不会显示在家长DIV

#main_wrap { 
    width: 850px; 
    margin-top:15px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 
#top { 
    width: 850px; 
    height: 288px; 
} 
#top_content { 
    width:850px; 
    height:250px; 
} 
#nav { 

    background-color:#333; 
    height:38px; 

#content { 
    width:850px; 
    padding-top:15px; 
    padding-bottom:15px; 
} 



#main_content { 
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
    float:left; 
    width:850px; 
    height:auto; 

} 

#footer { 
    float: left; 
    width:100%; 
    height:250px; 
    background-image:url(images/footer_bg_blue.png); 
    background-repeat:repeat-x; 
    margin-bottom:0px; 
    margin-left:0px; 
    margin-right:0px; 
    text-align:center; 
} 
#footer_cont { 
    padding-top:15px; 
    padding-bottom:15px; 
} 

<div id="main_wrap"> 
     <div id="top"> 
      <div id="top_content"> 

      </div> 
      <div id="nav"> 



      </div> 
     </div> 
     <div id="content"> 
      <!--<div id="sidebar"> 

      </div>--> 
      <div id="main_content"> 
      <h1>Hello World</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero risus, tincidunt a placerat vel, dignissim eget ligula. Mauris lobortis adipiscing orci, ut scelerisque nibh rhoncus nec. In metus ante, bibendum ac hendrerit et, vulputate id dolor. Sed et tellus at ipsum molestie tempus. Ut vitae vulputate sem. Sed sed ipsum elit, eget adipiscing magna. Sed et nisl eros, vitae convallis dui. Nullam nec feugiat nisi. Praesent in tortor ut enim molestie fermentum a et enim. Proin at porttitor ligula. Nulla vitae vulputate mauris. Donec auctor odio elit, vel egestas justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec suscipit pretium mollis. Sed egestas hendrerit quam eu pellentesque. Phasellus pharetra urna in mauris bibendum interdum. Pellentesque pellentesque pellentesque eros, eu adipiscing lectus fermentum id. Nullam iaculis, nisi auctor tincidunt hendrerit, eros quam accumsan elit, at cursus quam quam ac leo</p> 
      </div> 
     </div> 
    <!--</div>--> 
    <div id="footer"> 
     <div id="footer_cont"> 
      test 
     </div> 
    </div>

来源

2011-06-24 lampwins

你是什么意思“不会显示”？如果样式不显示，那么你可能会忘记包含.css文件。 –

扩展到垂直100％可能会变得棘手...需要记住的一点是，高度必须被继承，并逐渐降低它工作。因此，如果您将#content_wrap设置为相对＆250px;那么你可以将#content设置为高度：100％，它应该继承250px –

你意识到你#nav规则块没有右括号，对吗？ – 2011-06-24 22:10:36

您可以为您的＃内容股利指定overflow: hidden;其高度扩张一路页脚，你可以在此的jsfiddle，http://jsfiddle.net/68FFL/2/见。我不太清楚为什么会这样。如果你看看WordPress.com Mystique theme demo，你会发现他们使用这个规则来扩展他们的#main div，否则它没有像你一样的高度。

我不完全确定，但我认为你为什么你是#content div没有高度的原因之一是因为它的子元素不在内部的文档流中，因为它们是浮动的。如果你把另一个元素放在里面，那么div的高度就会扩大，如你在这里看到的，http://jsfiddle.net/68FFL/3/

来源

2011-06-24 22:39:52

孩子DIV不会显示在家长DIV

回答

相关问题