将子div扩展为父div而无需绝对定位或javascript

Question

我怎么能这样做？

我的困境是我可以将我的子元素扩展到父div的高度没有问题，但有时我的子元素比内容区域大，并被切断。

查看以下标记和css：

标记

<div class="parent">
    <div class="child">hello<br /><br /><br /><br /><br /><br /><br />there<br /><br />  </div>
</div>

CSS

.parent
{
    width: 100px;
    height: 100px;
    overflow: auto;
    background: pink;
}

.child
{
    background: orange;
    height: 100%;
}

This fiddle显示问题：子div没有达到父div的100％高度 - （正如你在上面的小提琴中看到的那样 - 可滚动区域是粉红色的）

Answer 1

div.child { height:100%; overflow-y:scroll; }

Answer 2

1）将父div包装在overflow:auto的容器中。

2）将display:table设置为父div -

现在，孩子的父母身高达到100％

<强> FIDDLE

标记：

<div class="wpr">
    <div class="parent-table">
        <div class="child">hello<br /><br /><br /><br /><br /><br /><br />there<br /><br /></div>
    </div>
</div>

CSS

.wpr
{
    width: 100px;
    height: 100px;
    overflow: auto; 
}

.parent-table
{
    background: pink;
    width: 100%;
    display:table;
}
.child
{
    background: orange;
    height: 100%;
}