最近我问了这个问题:溢出(滚动)- 100% 容器高度 https://stackoverflow.com/questions/4910883/overflow-scroll-100-container-height关于如何实现高度可变的垂直滚动div。
一位非常有帮助的用户提供了一个使用绝对定位和高度的解决方案:100%,在这里:http://jsfiddle.net/TUwej/2/ http://jsfiddle.net/TUwej/2/。在此小提琴中,您可以看到基本的所需行为 - 滚动 div 将填充主容器的高度,由“#main”元素中的内容确定。
我对此进行了一些修改并使用 top:0 Bottom:0 而不是 height:100% 来容纳可滚动区域上方的元素。修改后的版本可以在这里看到:http://jsfiddle.net/N6muv/3/ http://jsfiddle.net/N6muv/3/(我意识到有一些额外的标记和类定义是空的,并且相邻的同级组合器看起来是多余的 - 这些是实际结构的痕迹)
一切都很好,除了我必须为滚动 div 提供固定的顶部坐标(注意“.sidebar-list”选择器的 top:120px 声明)。我希望它相对于它上面的“.sidebar-options”元素,这样上面的选项容器可以有任意数量的选项,并且可滚动的 div 会适当地定位自己。使用固定坐标,如果添加或删除任何选项,要么会发生重叠,要么会产生不必要的空间 - 我想避免这种情况。应显示的选项的确切数量因视图而异。
我曾想过将滚动 div 包装在一个相对定位的容器中,但这样做会与 Bottom:0 产生冲突,不再指示主“.wrapper”容器的高度(它应该这样做)。类似地,使用 height:100% 将使用“.wrapper”容器的计算高度,因此可滚动 div 将延伸到“.wrapper”的边界之外。
有没有办法保留第二个小提琴中显示的功能,但可滚动 div 的顶部相对于选项 div 的底部(其高度可变)?
在此先感谢您的任何建议。
编辑:S.O.当我被问到是否想要开始赏金时,我就这么做了(第一次)——希望 100 分不会被认为太低。仍在寻找一种无脚本、纯 CSS 解决方案,不涉及 y 轴的固定坐标或尺寸(宽度和左侧分配都可以)。谢谢
UPDATE:
导入 JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
新演示:http://jsfiddle.net/Mutant_Tractor/N6muv/28/ http://jsfiddle.net/Mutant_Tractor/N6muv/28/
将这个漂亮的小 JQuery 脚本添加到您的页面中:
var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);
OLD
这如何满足您的需求?http://jsfiddle.net/Mutant_Tractor/N6muv/4/ http://jsfiddle.net/Mutant_Tractor/N6muv/4/
我变了position:absolute;
to position:relative
并添加了一个静态height:190px
以及添加background:pink;
(所以背景看起来总是正确的)
您可以尝试从上面的列表中添加和删除选项来演示这一点。
完整代码:
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background : pink;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)