当子div超出父级高度时，如何使子div可滚动？
用户名
我有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;
}
加利布雷肯
仅当您赋予溢出值大于的值时，才起作用。您的值与顶部的大小有关，因此使用jQuery，先获取该值，然后从父级中减去。
$(document).ready(function() {
$(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});
并添加overflow到孩子
.child1 {
background-color: red;
overflow: hidden;
}
.child2 {
background-color: blue;
overflow: auto;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
达到父div高度时滚动子div中的内容
- 2
打印时如何防止子div超出父div
- 3
子级div的高度决定了父级的高度？
- 4
子div超出父div
- 5
我想为子div添加滚动而不设置父div溢出时的高度
- 6
子可滚动容器打破了父级的 div 宽度
- 7
子div位置的绝对父级高度不起作用
- 8
子div的高度与父div的高度不同
- 9
子DIV使用可滚动内容填充剩余高度
- 10
如何使子div适合父级，并仅在Y轴上滚动溢出文本
- 11
如何使用父级div字体颜色代替子级
- 12
如何缩小父级div到其子级的大小？
- 13
如何在子div之间划分父div的高度
- 14
在CSS中将鼠标悬停在父div上时，如何设置子div的高度？
- 15
如何滚动父 div，其中孩子的子 div 溢出？
- 16
父div高度未申请子div
- 17
使子div高度达到父div的100％
- 18
当内容超出可用高度时，使div滚动
- 19
如何使div的宽度超出父级的宽度？
- 20
子节点不会超出父div
- 21
获取子div数据的高度属性，然后设置父级的高度
- 22
使用子 div 使父 div 可拖动
- 23
使用Scroll-y将Div设置为高度100％：隐藏，但是如何使子div具有可滚动性？
- 24
当子级宽度设置为100％时，父div的子div仅在右侧有奇怪的重叠
- 25
CSS margin-top使div超出父级的高度
- 26
CSS margin-top使div超出父级的高度
- 27
子级div不能达到100％的高度
- 28
100％高度的div包装器可扩展为100％高度的子级
- 29
修复了正子突破父级div
我来说两句