html – Child比max-height的父级大.溢出无效

前端之家收集整理的这篇文章主要介绍了html – Child比max-height的父级大.溢出无效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想拥有一个具有最大高度的父元素和一个填充此父元素的子元素.如果孩子的内容超过父母,则应显示滚动条.我试着像这样解决它:

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/

猜你在找的HTML相关文章