子DIVは親DIVの内部に表示されません

Question

さて、#main_contentは#contentの子ですが、#contentには表示されません。私は、#contentを＃main_contentのサイズまで垂直に展開する必要があります。また、#contentは#main_wrapの一部であり、#footerまで拡張する必要があります。どんな助けでも大歓迎です。

#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> 

Answer 1

あなたはこのjsFiddle、http://jsfiddle.net/68FFL/2/で見ることができるように、すべての方法フッターにその高さを拡張するためにあなたの#content divのためoverflow: hidden;を指定することができます。なぜそれがうまくいくのかは分かりません。 WordPress.com Mystique theme demoを見ると、そのルールを使用して#main divを展開していることがわかります。そうでなければ、あなたのような高さはありません。

私は完全にはわかりませんが、#content divが高さのない理由の1つは、フロートされているため、ドキュメントフローにない子要素が含まれていたためです。浮いていない別の要素を内側に置くと、ここに表示されるようにdivの高さが広がりますhttp://jsfiddle.net/68FFL/3/