html - 基于子元素的CSS动态高度

Question

很酷，所以我已经用 HTML 探索 CSS 大约一个月了，我仍在努力解决的一件事是如何让元素根据 child 的高度调整其高度。因此，例如，我有一个新闻按钮，可以将我带到一个页面，该页面具有指向不同时间打印的文章文件的链接，文章的长度各不相同，但是包含所有内容的内容元素始终允许文章溢出并且然后我必须使用滚动，是否可以设置高度以适应内部的子元素。

我试过:

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 中 float 内容(如果它没有任何其他非 float 内容)，它将保持为 0，但要解决此问题，您可以添加一个

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

在你的父元素结束之前(所以就在你的父元素之前)。这不是最优雅的解决方案，但效果很好，据我所知没有真正的替代方案。