如何将固定位置元素限制为浏览器窗口的高度？

Question

我有一个固定位置边栏的页面。如果内容太高而无法在浏览器窗口中显示，我希望侧栏可以滚动。

但是，当我使用overflow-y: scroll对边栏进行样式设置时，滚动条会显示，但它被禁用，因为边栏高度足以容纳所有内容，即使浏览器窗口太高也是如此。

有什么办法来限制固定位置元素的高度，当内容扩展到浏览器窗口的底部以下时，它会滚动吗？

我的应用程序可以使用jQuery解决方案。请注意，侧栏不会一直延伸到窗口的顶部。

http://jsfiddle.net/nA8z4/

http://jsbin.com/iqibew/2：该版本显示了一个标题，它的边栏中必须显示在下面。

Answer 1

您需要设置边栏的高度。现在，您的侧栏与您的文本块一样高，并在视口下方运行（但您看不到）。如果您将其高度设置为100％（或其他），则边栏将显示滚动条，如果其所有内容不能一次显示。

所以，你需要改变这一点：

div#fixed-div { 
    position: fixed; 
    left: 0; 
    top 80px; 
    width: 260px; 
    background-color: silver; 
    overflow-y: scroll; 
} 

要这样：

div#fixed-div { 
    position: fixed; 
    left: 0; 
    top 80px; 
    width: 260px; 
    background-color: silver; 
    overflow-y: scroll; 
    height: 100%; 
} 

编辑：

如果你想最大的浏览器支持（甚至老的浏览器）的解决方案，你需要JavaScript。下面是依赖于jQuery的一个解决方案：

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

div#header-div { 
    height: 90px; 
    background-color: lime; 
} 
div#fixed-div { 
    position: fixed; 
    width: 260px; 
    background-color: silver; 
    overflow-y: scroll; 
} 

的JavaScript：

var bodyHeight = $('body').height(); 
var headerHeight = $('#header-div').height(); 
var sidebarHeight = bodyHeight - headerHeight; 

$('#fixed-div').height(sidebarHeight); 

工作的jsfiddle：http://jsfiddle.net/nH7xR/