固定右侧面板需要什么样的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？

回答

相关问题