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

时间:2013-03-06 09:08:30

标签: html css height overflow

请考虑这个小提琴:http://jsfiddle.net/eKJAj/

我正在尝试使用绝对定位的div(红线)来获取其(黄色)父级的总高度的整个高度;不只是父母的可见高度。

如果您尝试使用小提琴,当您滚动黄色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:0pxposition:relative; margin-left:50px等蓝色条形图的一些选项,甚至尝试浮动红线,但无济于事。

如果可能,我宁愿只保留CSS。任何提示都非常赞赏!!

1 个答案:

答案 0 :(得分:6)

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

JSFiddle

.parent的容器设置为max-heightoverflow-y代替:

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

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

在您的示例中不起作用的原因是因为您将最大高度设置为300px。然后,100%高度.bar假设高度为300px。通过此解决方法,您的.parent分隔符的高度限制不超过300像素,而外部.container则会有。{/ p>