孩子身高是滚动父内容高度的100％(Child height to be 100% of scrol

请考虑此琴： http://jsfiddle.net/eKJAj/

我想有一个绝对定位的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 top:0px; botom:0px或position:relative; margin-left:50px position:relative; margin-left:50px ，甚至与浮动红线，无果制成的attemps。

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

一个解决办法是来包装你.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然后是假设的300像素的高度。有了这个解决方案，您.parent分频器没有一个300高度限制，但外.container做代替。