Question

很酷，所以我一直在用HTML探索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，所以欢迎任何建议。

Answer 1

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

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

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

基于子元素的CSS动态高度

1 个答案: