Ребенка высота должна быть 100% прокручиваемых родительское содержимое высоте

пожалуйста, рассмотрите эту скрипку: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:0px или position:relative; margin-left:50px и даже сделал попытку с плавающей красной линией, но безрезультатно.

если возможно, я бы предпочел сохранить только CSS. Любой намек очень ценится!!

6

1 ответов

одно решение-обернуть ваш .parent в контейнере (nother).

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;
}

причина, по которой он не работает в вашем примере, заключается в том, что вы устанавливаете максимальную высоту 300px. В 100% высота .bar затем принимает высоту 300px. С этим обходным путем, ваш .parent делитель не имеет ограничения высоты 300px, но внешний .container вместо этого.

6