html – Child比max-height的父级大.溢出无效
发布时间:2020-12-14 16:35:28 所属栏目:资源 来源:网络整理
导读:我想拥有一个具有最大高度的父元素和一个填充此父元素的子元素.如果孩子的内容超过父母,则应显示滚动条.我试着像这样解决它: HTML: div class="parent" div class="child" div class="some-content" abcdebrabcdebrabcdebrabcdebrabcdebr abcdebrabcdebrab
我想拥有一个具有最大高度的父元素和一个填充此父元素的子元素.如果孩子的内容超过父母,则应显示滚动条.我试着像这样解决它:
HTML: <div class="parent"> <div class="child"> <div class="some-content"> abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> </div> </div> </div> CSS: div.parent { max-height: 50px; width: 100px; border: 1px solid black; } div.child { height: 100%; overflow-y: auto; } 不幸的是,这不能按预期工作.孩子越过父母. 请注意,设置overflow-y:auto到PARENT不是一个选项,因为它怀疑存在其他不应滚动的项目.怀疑孩子填满了父母留下的空间.有关更多信息,请参阅实时演示. Live DEMO 解决方法
据我所知,没有简单的方法可以用CSS做到这一点.基本上你要求浏览器用可滚动元素填充剩余的空间.你可以用JavaScript做这个(这个例子使用jQuery,因为我很懒):
$('.parent').each(function(){ $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px"); }); http://jsfiddle.net/BUxUe/13/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |