Html 基于子元素的CSS动态高度

Html 基于子元素的CSS动态高度,html,css,height,Html,Css,Height,很酷,所以我已经用HTMLFO探索CSS大约一个月了,我仍然在努力解决的一件事是如何让一个元素根据子元素的高度来调整它的高度。例如,我有一个新闻按钮,它会将我带到一个页面,该页面有链接到不同时间打印的文章存档,文章的长度不同,但包含所有内容的内容元素总是允许文章溢出,然后我必须使用滚动,有没有设置好高度,以适应里面的儿童元素 我试过: height: 100%; 如果我检查元素,指标显示它是647px。然后它就呆在那里 height: auto; 将高度设置为200px,则所有内容都已溢出

很酷,所以我已经用HTMLFO探索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>
我使用边界只是为了看到一个视觉效果,以了解正在发生的事情。我读过一些东西,但我不确定如何在这里实现它。
任何帮助,我也在使用JavaScript和jQuery,所以欢迎您提供任何建议。

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

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


在父元素结束之前(在父元素结束之前)。我不是最优雅的解决方案,但效果很好,我知道没有真正的替代方案。

顺便说一句,你不必指定宽度:100%的块元素(如div),默认为100%。很高兴我能帮忙,如果这解决了你所有的问题,记得把它标记为已回答的问题,谢谢,我在计算我的应用程序的高度时遇到了一个问题。我的子元素是绝对定位的,需要相对定位的标题作为子绝对定位元素的高度,否则它会覆盖主体。将尝试使用css calc()。
<div style="clear: both"></div>