Ребенка высота должна быть 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. Любой намек очень ценится!!
1 ответов
одно решение-обернуть ваш .parent
в контейнере (nother).
задание .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
вместо этого.