3

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

我试过了：

height: 100%;

如果我检查元素，指标说它是 647px。然后它就在那里

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，所以欢迎任何建议。

4

1 回答 1

12

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

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

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

于 2012-05-16T07:02:01.720 回答