Question

我有一个侧边栏固定在窗口的左边缘，并在窗口底部对齐了一些滚动内容。通常，我可以将滚动内容的容器top属性设置为其上方内容的高度，一切看起来都不错。

这是我正在谈论的一个例子。还有more concrete example

#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

/* and inside sidebar */
#header {
    /* my question is, how do I achieve this effect when this height is 'auto' */
    height: 100px;
}

#scrollable-content {
    top: 100px;
    overflow-y: scroll;
}

当滚动内容上方的内容没有固定高度时，我能达到同样的效果吗？我需要介绍JavaScript吗？我如何修复this fiddle以便始终可以看到滚动内容的底部？

Answer 1

你可以添加几行javascript（使用jQuery）来查找可滚动区域的高度：

// find the scrollable height
var scroll_height = $(window).height() - $('#header').height();

// set the height of the scrollable div
$('#scrollable-container').css('height', scroll_height + 'px');

然后在隐藏/显示之后在点击功能中执行相同的操作，以便使用新的标题高度

http://jsfiddle.net/94E4Z/2/

绝对定位具有不同的高度

1 个答案: