我的问题与this one非常相似,但我可以看到的差异是我的父div(#container
)有一个min-height
和一个max-height
(没有{{ 1}}因为它应该与其内容一起增长),但可滚动的div(height
)也不知道它的#dynamic-part
和height
。当它的父级已达到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/
答案 0 :(得分:3)
如果您使用flexbox模型,那么这很容易:
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;
答案 1 :(得分:0)
你需要一个条件:
If( maxHeightReached ){
scrollable();
}
在这种情况下,您可以使用javascript来跟踪元素的高度。但是在这里提出代码并不容易,因为它实际上取决于你想要做的事情。
希望它有所帮助。