我如何製作3個獨立滾動列

我有一個網站，我想在其中有3個獨立滾動的<div>元素。我如何製作3個獨立滾動列

的HTML代碼是這樣的：

<div class="sidebar">Content</div> 
<div id="window">Some very long content</div> 
<div class="sidebar">More content</div>

相關的CSS是這樣的：

body { 
    overflow: hidden; 
} 

#window { 
    font-family: monospace; 
    overflow: auto; 
    width: 70%; 
    float: left; 
    height: 100%; 
} 

.sidebar { 
    overflow: auto; 
    width: 15%; 
    float: left; 
    height: 100%; 
}

從我通過搜索互聯網看到的，這應該工作。但我根本沒有看到任何滾動條。

爲什麼？

我該如何解決這個問題？

來源

2014-05-19 Kilobyte

'溢出：如果有必要auto'只增加了滾動條。你的內容是否足以觸發他們？ – ajm

height: 100%作爲百分比隻影響元素的高度，如果該元素的父級具有明確的高度。默認情況下body標記的高度是內容的高度，而不是窗口的整個高度。

嘗試添加此：

html, body { height: 100%; }

來源

2014-05-19 12:59:54 Douglas

不幸的是，這似乎沒有任何效果 – Kilobyte

下面是一個適用於我的例子：http://jsfiddle.net/6t69U/ – Douglas

我剛剛意識到我有另一個sourrounding div沒有「高：100％;'屬性。添加它解決了問題。謝謝您的幫助！ – Kilobyte

因爲你的身高：100％;你的div將適應文本的高度。通過改變你的身高例如：250px你的代碼將工作。希望這有助於。 :)

來源

2014-05-19 12:59:28 mrijneveld

問題是我想讓它跨越全屏幕高度。我無法預測窗戶有多高 – Kilobyte

我如何製作3個獨立滾動列

回答

相關問題