滾動固定位置容器中的部分內容

我在佈局中有一個position: fixed div，作爲側邊欄。我已被要求將其內容的一部分保持固定在其頂部（內部），其餘部分將滾動，如果它溢出底部的div。滾動固定位置容器中的部分內容

我看了一下this answer，但是該解決方案提出了有不position: fixed或position: absolute容器，這是一種痛苦的工作。

我做了一個JSFiddle演示我的問題here。大量的文本應該理想地滾動，而不是溢出到頁面的底部。標題的高度可能因內容而異，並且可能是動畫效果。

的jsfiddle示例代碼：

CSS：

div.sidebar { 
    padding: 10px; 
    border: 1px solid #ccc; 
    background: #fff; 
    position: fixed; 
    top: 10px; 
    left: 10px; 
    bottom: 10px; 
    width: 280px; 
} 

div#fixed { 
    background: #76a7dc; 
    padding-bottom: 10px; 
    color: #fff; 
} 

div#scrollable { 
    overlow-y: scroll; 
}

HTML：

<div class="sidebar"> 
    <div id="fixed"> 
     Fixed content here, can be of varying height using jQuery $.animate()   
    </div> 

    <div id="scrollable"> 
     Potentially long content 
    </div> 
</div>

沒有一個固定的頭，我可以簡單地添加overflow-y: scroll到div.sidebar，我可以高興地把它的滾動的所有內容如果它溢出容器的底部。但是，我遇到了在側邊欄頂部有一個固定的，可變高度標題的問題，並且如果它太長而無法放入容器中，則會在滾動下方顯示任何內容。

div.sidebar必須住宿position: fixed，我非常希望這樣做沒有任何黑客，以及使其跨瀏覽器成爲可能。我嘗試了各種各樣的東西，但都沒有工作，我不確定要從這裏嘗試什麼。

如何在容器內容溢出包含div的情況下僅在Y方向上容器滾動時使用不同的高度不變的標頭？我非常想遠離JS，但如果我必須使用它，我會。

來源

2012-04-14 Bojangles

我不知道，如果一個純CSS的解決方案存在此。基本上你試圖修復固定在div＃，但是當你做，你把它出文檔的正常流動，這樣的高度不會推動其他要素下跌的一頁。 – 2012-04-14 14:38:10

考慮到非滾動DIV是在側邊欄的內容的頂部，它不必是'位置：fixed' - 它可以只是坐在正常流動。我想知道是否有辦法將'overflow：scroll'元素的頂部向下按非滾動div的高度。它實際上不是「位置：固定」。我的意思是「固定」，如「不滾動溢出」。 – Bojangles 2012-04-14 14:40:26

看來你對你的小提琴取得了一些進展，如果你刪除的DIV＃側邊欄底部財產股利將擴大以適應內容 – 2012-04-14 15:28:18

這似乎工作，如果你使用

div#scrollable { 
    overflow-y: scroll; 
    height: 100%; 
}

，並添加padding-bottom: 60px到div.sidebar。

例如：http://jsfiddle.net/AKL35/6/

但是，我不清楚爲什麼它必須是60px。

此外，你從overflow-y: scroll;

來源

2012-04-14 17:14:15 FrogInABox

它使用'padding-top：50px'，因爲藍色標題的高度正好是50px。我想讓這個頭部高度可變，儘管它變得很明顯，但我可以解決這個問題的唯一方法是使用JavaScript，我不想這樣做。 – Bojangles 2012-04-14 17:18:56

這不適用於較舊的瀏覽器，例如Mobile Safari for iOS 4.2或Android 2.3。如果有人有解決方案 - 發佈！ – mheavers 2013-04-30 15:23:41

奇異的輝煌。 – 2013-07-08 22:17:39

-1

將可滾動div設置爲max-size並將overflow-y: scroll;添加到它的屬性。

編輯：試圖讓jsfiddle工作，但它不正確滾動。這需要一些時間才能弄清楚。

來源

2012-04-14 15:00:28 Harry

對不起，我忘了補充一點，側邊欄總是一直延伸到適合窗口，並且不與頁面滾動，所以'MAX-size'在這裏不適用。 – Bojangles 2012-04-14 16:24:51

無緣f我改變滾動股利與絕對位置，一切對我的作品

div.sidebar { 
    overflow: hidden; 
    background-color: green; 
    padding: 5px; 
    position: fixed; 
    right: 20px; 
    width: 40%; 
    top: 30px; 
    padding: 20px; 
    bottom: 30%; 
} 
div#fixed { 
    background: #76a7dc; 
    color: #fff; 
    height: 30px; 
} 

div#scrollable { 
    overflow-y: scroll; 
    background: lightblue; 

    position: absolute; 
    top:55px; 
    left:20px; 
    right:20px; 
    bottom:10px; 
}

DEMO with two scrollable divs

來源

2014-04-30 16:05:49

其實這是更好的方法做那。如果使用height: 100%，內容熄滅的邊界，但是當它是95%一切都是爲了：

div#scrollable { 
    overflow-y: scroll; 
    height: 95%; 
}

來源

2014-11-18 15:20:47 Vasil

滾動固定位置容器中的部分內容

回答

相關問題