Question

最近我问了这个问题：overflow (scroll) - 100% container height关于如何实现一个高度可变的垂直滚动div。

一位非常有帮助的用户提供了使用绝对定位和高度的解决方案：100％，此处：http://jsfiddle.net/TUwej/2/。在这个小提琴中，你可以看到基本的所需行为 - 滚动div将填充主容器的高度，由'#main'元素中的内容决定。

我对此进行了一些修改并使用了top：0 bottom：0而不是height：100％以容纳可滚动区域上方的元素。修改后的版本可以在这里看到：http://jsfiddle.net/N6muv/3/（我意识到有一些额外的标记和类定义是空的，并且相邻的兄弟组合似乎是多余的 - 这些是实际结构的遗迹）

一切都很好，除了我必须为滚动div提供一个固定的顶部坐标（注意顶部：'。sidebar-list'选择器的120px声明）。我想这是相对于它上面的'.sidebar-options'元素，所以上面的选项容器可以有任意数量的选项，可滚动的div将适当地定位自己。使用固定坐标，如果添加或删除任何选项，则会发生重叠或产生不必要的空间 - 我想避免这种情况。应该出现的确切选项数量因视图而异。

我曾想过将滚动div包装在一个相对定位的容器中，但这样做会产生与bottom的冲突：0不再指示主'.wrapper'容器的高度（应该这样做）。类似地，使用height：100％将使用'.wrapper'容器的计算高度，因此可滚动div将超出'.wrapper'的边界。

有没有办法保持第二个小提琴中显示的功能，但是滚动div的顶部相对于选项div的底部（可变高度）？

提前感谢任何建议。

编辑：S.O。问我是否想要开始赏金，所以我做了（第一次） - 希望100分不算太低。仍然在寻找一个无脚本的纯css解决方案，它不涉及y轴的固定坐标或尺寸（宽度和左侧分配都可以）。 THX

Answer 1

<强>更新

导入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/

将这个漂亮的小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/

我将position:absolute;更改为position:relative并添加了静态height:190px以及添加background:pink;（因此bg总是看起来正确）

您可以尝试在上面的列表中添加和删除选项以演示此内容。

完整代码：

.sidebar-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background : pink;
}

Answer 2

我相信你应该删除内部元素的绝对定位并尝试overflow：auto。

Answer 3

您需要定义侧边栏列表的高度，因为您必须将此内容设置为可滚动，并且必须定义最小或最大高度。您可以设置.sidebar-list{position: relative;}查看 Fiddle

修改您的.sidebar-content也应相对定位请参阅 Fiddle 您的'选项'内容包含的内容。

可变高度滚动div，相对于可变高度的兄弟定位

3 个答案: