达到父级最高身高时可滚动的孩子

时间:2017-08-30 15:21:20

标签: html css css3

我的问题与this one非常相似,但我可以看到的差异是我的父div(#container)有一个min-height和一个max-height(没有{{ 1}}因为它应该与其内容一起增长),但可滚动的div(height)也不知道它的#dynamic-partheight。当它的父级已达到max-height时,它应该是可滚动的。

使用纯CSS可以实现这一点吗?

HTML

max-height

CSS

<div id="container">
  <div id="fixed-part">
  This will always be 60px big
  </div>
  <div id="dynamic-part">
    This can grow and so should be scrollable<br><br>
    <a href="#" onclick="addContent()">Add content</a><br><br>
    <div id="insert">
    </div>
  </div>
</div>

这是帮助的小提琴: https://jsfiddle.net/bz0b4ydz/

2 个答案:

答案 0 :(得分:3)

如果您使用flexbox模型,那么这很容易:

&#13;
&#13;
function addContent() {
  let div = document.getElementById("insert");
  div.innerHTML += "<div class=\"content\">New content</div>";
}
&#13;
#container {
                            display: flex;
                            flex-flow: column;
  min-height: 100px;
  max-height: 300px;
  border: solid 1px black;
  width: 200px;
  padding: 0 5px; 
}

#fixed-part {
                       flex-shrink:0;/* or 
                       no height set but the full flex set : 
                       flex:1 0 60px;*/
  height: 60px;        /* can be avoid, see previous comment */
  border: solid 1px pink;
}

#dynamic-part {
                            flex: 1;
  border: solid 1px blue;
  overflow: auto;
}

.content {
  background-color: grey;
  width: 100%;
  height: 50px;
  margin: 5px auto;
}
&#13;
<div id="container">
  <div id="fixed-part">
    This will always be 60px big
  </div>
  <div id="dynamic-part">
    This can grow and so should be scrollable<br><br>
    <a href="#" onclick="addContent()">Add content</a><br><br>
    <div id="insert">
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你需要一个条件:

If( maxHeightReached ){
  scrollable();
}

在这种情况下,您可以使用javascript来跟踪元素的高度。但是在这里提出代码并不容易,因为它实际上取决于你想要做的事情。

希望它有所帮助。