我有2个子div以行列模式嵌套在父div中：父级是列,子级是行.
上子div具有可变高度,但保证小于父div的高度.
较低的子div也具有可变高度.在某些情况下,子div的高度会使较低的子div超过父级.在这种情况下,我需要使较低的div可滚动.请注意,我只希望下部div可滚动,而不是整个父div.
我该如何处理？
有关案例示例,请参阅附件jsfiddle：http://jsfiddle.net/0yxnaywu/5/
HTML：
<div class="parent">
<div class="child1">
hello world filler
</div>
<div class="child2">
this div should overflow and scroll down
</div>
</div>
CSS：
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
}
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
解决方法
溢出仅在大于时为溢出值赋值时才起作用.你的值与top的大小有关,所以使用jQuery,抓取该值然后从父级中减去.
$(document).ready(function() {
$(".child2").css("max-height",($(".parent").height()-$(".child1").height()));
});
并为孩子们添加溢出
.child1 {
background-color: red;
overflow: hidden;
}
.child2 {
background-color: blue;
overflow: auto;
}
