基于子元素的 CSS 动态高度

Question

很酷，所以我已经用 HTML fo 探索 CSS 大约一个月了，而我仍在苦苦挣扎的一件事是如何让元素根据子元素的高度调整其高度。例如，我有一个新闻按钮，它会将我带到一个页面，该页面包含指向不同时间打印的文章存档的链接，文章的长度各不相同，但包含所有内容的内容元素总是允许文章溢出和然后我必须使用滚动，是否可以设置高度以适应里面的子元素。

我试过了：

height: 100%;

如果我检查元素，指标显示其为 647 像素。然后它就呆在那里

height: auto;

设置高度为200px，全部溢出。

这是一段html嵌套..

 <div id="news_head">
 </div>
 <div id="news_content">
   <div id="news_scroll">
   </div>
   <div id="news_main_page">
   </div>
   <div id="side_archive">
   </div>
 </div>
 <div id="disquss_section">
 </div>

这个的css是：

#news_head {
  border: 1px solid red;
  height: 200px;
  width: 100%;
}

#news_content {
  border: 1px solid red;
  height: 100%;
  width: 1200px;
  margin: 5px auto;
}

#news_scroll {
  border: 1px solid green;
  width: 1198px;
  height: 200px;
}

#news_main_page {
  border: 1px solid blue;
  width: 988px;
  height: 430px;
  float: left;
}

#side_archive {
  border: 1px solid yellow;
  width: 200px;
  height: 430px;
  float: right; 
}

我使用边框只是为了直观地了解正在发生的事情。我已经阅读了一些东西，但我不确定如何在这里实现它，http://css-tricks.com/snippets/css/center-div-with-dynamic-height/。 任何帮助，我也在使用 JavaScript 和 jQuery，所以欢迎任何建议。

Answer 1

如果您在容器 div 中浮动内容（如果它没有任何其他非浮动内容），它将保持为 0，但要解决此问题，您可以添加一个

<div style="clear: both"></div>

在你的父元素结束之前（所以就在你的父元素之前）。我不是最优雅的解决方案，但就像魅力一样，而且我知道没有真正的替代方案。