固定右側面板需要什麼樣的CSS？

我想要一個雙列網頁，右側面板固定寬度，左側面板佔據剩餘空間。右面板不應滾動，但左面板應該。滾動條必須位於左列和右列之間（換句話說，左邊的div需要自己的滾動條而不是整個頁面滾動）。固定右側面板需要什麼樣的CSS？

我目前擁有的HTML：

<div id="l"><!-- Lots of text so it will scroll --></div> 
<div id="r">Right panel</div>

和CSS：

body { 
    margin: 0; 
    padding: 0; 
} 

#l { 
    padding: 10px 360px 10px 10px; 
    background-color: #808080; 
    text-align: center; 
    overflow-y: scroll; 
} 

#r { 
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 350px; 
    height: 100%; 
    background-color: #f5f5f5; 
    border-left: 1px solid #353535; 
    padding: 10px; 
}

目前，滾動條出現在整個頁面的右側，而不僅僅是離開div滾動。請幫忙！（你可以用this jsFiddle玩。）

來源

2012-03-17 James

你在實際應用中試過了嗎？如果是這樣的話，整個頁面的滾動條呢？ – jmishra 2012-03-17 11:48:51

@ ladiesMan217結果與我的實際應用程序相同（在IE9，Chrome中測試）。 – James 2012-03-17 11:51:09

嗯，當我刪除右面板我看到左側面板上的殘疾滾動條以某種方式 – jmishra 2012-03-17 12:05:11

您可以#main包裝指定height並設置overflow: hidden;： http://jsfiddle.net/DPZha/8/

來源

2012-03-17 12:17:14 lixonic

你的代碼是ATM 100％正確。您的右側面板是固定的，使用滾動條只會滾動左側面板並保持右側未受損傷。

如果body -scrollbar困擾你，給你的html,body和左面板100％的高度，並使其滾動溢出。我更新了你的example-fiddle以反映這一點。請注意，您需要相應地設置兩者的寬度，即#r和#l，因此固定的#r不會與左列重疊。

來源

2012-03-17 12:17:36 Christoph

+1這是偉大的，除了我需要左側面板的寬度是「剩下的空間」，而不是一個固定的寬度。這是可能的CSS？（是的，我可以做一個JS黑客，但我寧願不）。 – James 2012-03-17 12:21:42

我認爲這將不可能與香草CSS。由於'position：fixed'將正常文檔流中的右列刪除，您不知道，您爲左列留下了多少空間。 – Christoph 2012-03-17 12:23:59

順便說一句，你的例子小提琴有同樣的問題。將你的「X」中的一個改爲冗長的單詞，看看它是如何被剪輯的。 – Christoph 2012-03-17 12:25:35

固定右側面板需要什麼樣的CSS？

回答

相關問題