可变高度滚动div，相对于变量高度兄弟

最近我问了这个问题：overflow (scroll) - 100% container height关于如何实现垂直滚动div与高度可变。可变高度滚动div，相对于变量高度兄弟

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

我修改了这个有点和使用顶部：0底部：0代替高度：100％，以适应可滚动区域上方的元素。修改后的版本可以在这里看到：http://jsfiddle.net/N6muv/3/（我知道有一些额外的标记和类定义是空的，并且相邻的兄弟组合器看起来多余 - 这些都是实际结构的痕迹）

一切都很好，除了我必须提供滚动div的固定顶部坐标（请注意顶部：'.sidebar-list'选择器的120px声明）。我希望这是相对于它上面的'.sidebar-options'元素，以便上面的选项容器可以有任意数量的选项，并且可滚动的div将适当地定位它自己。使用固定的坐标，如果任何选项被添加或删除，重叠发生或不必要的空间发展 - 我想避免这种情况。应该出现的选项的确切数量因视图而异。我曾想过将卷动div包装在相对定位的容器中，但这样做会与bottom：0产生冲突，不再指示主'.wrapper'容器（它应该这样做）的高度。同样，使用高度：100％将使用“.wrapper”容器的计算高度，因此可滚动的div将超出“.wrapper”的边界。

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

在此先感谢您的任何建议。

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

来源

2011-02-07 momo

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/

加入这个可爱的小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; 
}

来源

2011-02-08 13:19:22

@Myles Gray - 感谢您的回应，但.sidebar的高度需要与.content div的高度相匹配，无论其中包含什么。这是目前的工作方式。增加一个固定的高度会使这部分功能失效。 – momo 2011-02-08 18:55:09

，我相信您应该对内部元件取出绝对定位，并尝试溢出：汽车。

来源

2011-02-16 18:11:13 madr

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

编辑你.sidebar-content也应相对定位看到这个Fiddle无论你的“选项”内容包含。

来源

2013-04-02 12:58:40

可变高度滚动div，相对于变量高度兄弟

回答

相关问题