Question

我想拥有一个具有最大高度的父元素和一个填充此父元素的子元素。如果孩子的内容超过父母，则应显示滚动条。我试着像这样解决它：

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

Answer 1

据我所知，没有简单的方法可以用CSS做到这一点。基本上你要求浏览器用可滚动元素填充剩余空间。你可以用JavaScript做这个（这个例子使用jQuery因为我很懒）：

$('.parent').each(function(){
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px");
});

http://jsfiddle.net/BUxUe/13/

Answer 2

您可以尝试使用Flexbox。

div.parent {
    max-height: 300px;
    width: 200px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}
div.sibling {
    border: 1px solid red;
    flex: 0 0 auto;
}
div.child {
    overflow-y: auto;
    border: 1px solid blue;
    flex: 0 1 auto;
}

我不确定，如果这是一种黑客行为。但它似乎解决了这个问题。

Answer 3

查看Fiddle

div.parent {
    max-height: 50px;
    width: 100px;

    border: 1px solid black;
    overflow:scroll;
}

div.child {
    height: 100%; 
}

儿童比最大身高的父母大。溢出无效

3 个答案: