正確固定位置，以便頁面上4個元素中的3個不會隨着滾動移動

Question

我有一個頁面在此JS Fiddle中被模擬。

該頁面有一個title bar，一個sidebar，一個timeline和一個div叫days

的只一個應該滾動是days。

我有使得title bar，sidebar，並通過timeline留.days 100％固定爲用戶滾動與正確類型的定位的麻煩。

任何幫助將非常感激

Answer 1

嗯，在這種情況下，我不知道position:fixed實際上是解決這一問題的最簡單的方法。我認爲這個問題實際上在於你的元素的高度。

包裝所有元素的.container的高度爲300px。但是，.days沒有確定的高度;所以即使您指定overflow-y:scroll，它也不會真正滾動，而只是展開到顯示所有內容所需的高度。這是因爲overflow:hidden上.container雖然，這會導致的.days的附加高度來被隱藏的不立即顯而易見。

指定.days的高度應該給你想要的。但究竟是什麼高度呢？那麼，我會假設你想要.days的底部與.sidebar的底部相同，底部高度爲250px。由於.timeline（以上.days）具有12px的高度，那麼你需要的高度爲250像素 - 12像素= 238px。

在你的CSS定義，只需添加這種風格：

.days { 
    height: 238px; 
} 

這應該讓你滾動的.days的內容，而不改變其周圍的元素的位置。

這裏是一個updated JSFiddle來演示。希望這可以幫助！如果您有任何問題，請告訴我。

Answer 2

你可能想試試這個，如果它成爲你的目的。在你評論的上面的某處，你說過不確定你從後端得到的內容數量，所以這種方法應該照顧它。

JSFIDDLE

代碼：

.container { 
    border: 1px solid #ccc; 
} 

.titlebar { 
    height: 50px; 
    width: 100%; 
    background: white; 
    border-bottom: 1px solid #ccc; 
    position: fixed; 
    top:0; 
} 

.content { 
    overflow: hidden; 
} 

.sidebar { 
    width: 150px; 
    height: 100%; 
    background: gray; 
    position: fixed; 
    left:0; 
    top: 50px; 
} 

.content-area { 
    width: 75%; 
    float: left; 
    margin-top: 60px; 
    margin-left:150px; 
} 

.timeline { 
    height: 12px; 
    width:100%; 
    background: blue; 
    position: fixed; 
    top:50px; 
} 

.days { 
    background: orange; 
} 

具體來說，看看position:fixed如何與top，left和margin-top和margin-left一起使用。

有一次，我寫了一篇關於CSS positioning，它可以幫助你更好地理解它。