如何將固定位置元素限制爲瀏覽器窗口的高度？

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/