请考虑这个小提琴:http://jsfiddle.net/eKJAj/ 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
or position:relative; margin-left:50px
甚至尝试过浮动红线,但无济于事。
如果可能的话我宁愿只保留CSS。任何提示非常感谢!
一种解决方案是包装您的.parent
在另一个)容器中。
JSFiddle http://jsfiddle.net/eKJAj/21/.
设置你的.parent
的容器具有max-height
and 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
相反。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)