不同高度的絕對定位

我有一個固定在窗口左邊的側邊欄，並且有一些滾動內容與窗口底部對齊。通常情況下，我可以將滾動內容的容器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以便我總能看到滾動內容的底部？

來源

2013-07-29 jdgilday

是否有你需要＃滾動的內容和的#header是位什麼特別的原因：絕對？ –

我需要將此側邊欄固定到屏幕的邊緣，並且在主內容可以滾動時不會比窗口高。我需要Gmail的聊天功能 - 聯繫人列表在左側滾動，而其上方的內容（標籤）可能高度變化 – jdgilday

如果瀏覽器支持不是問題，那麼也許看看flexbox。如果是這樣，那麼我認爲JavaScript是唯一的出路 –

您可以添加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/

來源

2013-07-29 04:04:22 Beno

不同高度的絕對定位

回答

相關問題