请考虑这个小提琴: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。任何提示都非常赞赏!!
答案 0 :(得分:6)
一种解决方案是将.parent
包装在(另一个)容器中。
将.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
分隔符的高度限制不超过300像素,而外部.container
则会有。{/ p>