製作滾動條出現內部格

我有這個網站：

<html> 
<head> 
    <title>Title blabla</title> 
</head> 

<body> 
    <div id="gHeader"> 
    </div> 
    <div id="gBody"> 
    </div> 
</body> 
</html>

gHeader是標題的一部分，這是那裏的菜單去，gBody是身體的一部分，這是其他事情發生的地方。

當我在gBody中獲得大量內容時，屏幕上可能會顯示更多內容，滾動條會出現在右側。問題在於這個滾動條將gHeader推向左邊。

我在尋找的解決方案是，當滾動條出現時，它只出現在gBody中，而不是部分出現在gHeader上。

我不希望滾動條影響我的標題的外觀和感覺。特別是因爲我的菜單的一部分從右側開始。這可能嗎？

來源

2012-11-18 ProgrammerAtWork

向我們展示你的CSS ... – Alias

您需要手動設置內容區域的高度，並使用overflow:auto。像這樣的東西可能會工作：

#gHeader { 
    position: fixed; 
    left: 0; top: 0; right: 0; height: 150px; 
} 
#gBody { 
    position: fixed; 
    left: 0; top: 150px; right: 0; bottom: 0; 
    overflow: auto; 
}

來源

2012-11-18 20:54:46

的'的位置是：固定;'沒有任何意義可言這裏。 –

爲什麼不呢？它允許固定相對於窗戶的高度...... –

這沒有任何意義。給位置固定一個元素將使其浮動。我知道這不應該是這種情況，因爲它是**這個用戶試圖避免的**。隨後，它根本沒有用處，並且需要靜態位置。靜態位置是*默認*，所以你不需要改變任何東西。我知道你想要什麼是適用於所有屏幕分辨率的東西，但我不認爲這就是TS想要的。如果他這樣做，我會刪除我的投票。 **編輯**：刪除我的投票，因爲你的解決方案是一樣好。 –

唯一你需要的是一個固定的高度和overlow-y;自動;在你的gBody。

例子：

#gBody { 
    height: 600px; 
    overflow-y: auto; 
}

來源

2012-11-18 20:56:53

與iframe相同的問題。如果網站的總高度大於屏幕，該怎麼辦？然後你最終得到2個滾動條 – Tom

@Tom：True。我以爲TS正在尋找像這樣的東西，對於最常見的解決方案，固定的高度。如果這不是他想要的，他將需要採用Kolink的解決方案。 :) –

製作滾動條出現內部格

回答

相關問題