html - 子高度为可滚动父内容高度的 100%

Question

请考虑这个 fiddle :http://jsfiddle.net/eKJAj/

我正在尝试使用绝对定位的 div(红线)来占据其(黄色)父级总高度的整个高度；不仅仅是 parent 的可见高度。

如果您尝试使用 fiddle，您会发现当您滚动黄色 div 时，红色条并没有完全向下。如果删除了一些蓝色部分，它也不能比它的父级大。

html:

<div class="parent">
    <div class="bar"></div>
    <div class="section"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section"></div>
</div>

<input type="button" value="hide" onclick="$('.section2').slideUp(400)" />
<input type="button" value="show" onclick="$('.section2').slideDown(400)" />

CSS:

.parent{
    position:relative;
    width:100%; max-height:300px;
    background-color:yellow;
    overflow-y:auto;
}

.bar{
    position:absolute; left:50px;
    width:1px; height:100%;
    background-color:red;
}

.section, .section2{
    width:100%; height:70px;
    margin-bottom:3px;
    background-color:blue;
}

我一直在为蓝色栏尝试一些选项，例如 top:0px; botom:0px 或 position:relative; margin-left:50px 甚至尝试 float 红线，但无济于事。

如果可能的话，我宁愿只保留它的 CSS。非常感谢任何提示!!

Answer 1

一个解决方案是将您的 .parent 包装在一个(另一个)容器中。

JSFiddle .

将您的 .parent 的容器设置为具有 max-height 和 overflow-y:

<div class="container">
    <!-- parent in here -->
</div>

.container {
    max-height:300px;
    overflow-y:auto;
}
.parent{
    position:relative;
    width:100%;
    background-color:yellow;
}

它在您的示例中不起作用的原因是您将最大高度设置为 300 像素。 100% 高度 .bar 假设高度为 300px。使用此解决方法，您的 .parent 分隔线没有 300 像素的高度限制，但外部 .container 有。