使div的高度随其内容扩展

您需要

clear:both

#main_content

<br />;

#main_content

.clear { clear: both; }

更新：
这个问题仍然有相当多的流量，所以我想使用CSS3中称为“弹性框”或“弹性框”的新布局模式，以一种现代的替代方法来更新答案：

body {  margin: 0;}.flex-container {  display: flex;  flex-direction: column;  min-height: 100vh;}header {  background-color: #3F51B5;  color: #fff;}section.content {  flex: 1;}footer {  background-color: #FFC107;  color: #333;}<div >  <header>    <h1>     Header    </h1>  </header>  <section >    Content  </section>  <footer>    <h4>      Footer    </h4>  </footer></div>

当前，大多数现代浏览器都支持Flexbox和视口单元，但是如果您必须保持对旧版浏览器的支持，请确保检查特定浏览器版本的兼容性。