Question

我想要一个双列网页，其中右侧面板固定宽度，左侧面板占用剩余空间。右侧面板不应滚动，但左侧面板应该滚动。滚动条必须位于左列和右列之间（换句话说，左div需要自己的滚动条而不是整页滚动。）

我目前有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。）

Answer 1

您可以为height包装器指定#main并设置overflow: hidden;： http://jsfiddle.net/DPZha/8/

Answer 2

您拥有的代码100％正确。您的右侧面板是固定的，使用滚动条只会滚动左侧面板并保持右侧不受伤害。

如果body - 滚动栏困扰您，请将您的html，body和左侧面板设为100％高度并使其在溢出时滚动。我更新了您的example-fiddle以反映这一点。请注意，您需要相应地设置#r和#l的宽度，因此固定的#r不会与左列重叠。

固定右侧面板需要什么CSS？

2 个答案: