Question

我有一个具有以下风格的侧栏

.side-bar{
    overflow: auto;
    position: fixed;
}

现在，由于此侧栏垂直长于屏幕长度，因此浏览器会在侧栏旁边引入另一个垂直滚动条。

这不太理想。

有没有办法用相同的垂直滚动控制主要内容和侧边栏？

Answer 1

你能看出这是否是你正在寻找的效果？为简单起见，它仅显示1个元素（div）作为右侧固定条。此设置为您提供了一个滚动条，但滚动条仅属于div。页面的主体本身不可滚动，因此如果主体内容太多，则溢出将不可见。

要测试下面的小样本，您需要在div中添加一堆文本以强制它垂直展开。

<html>

<head>
  <style>
    body {
      overflow: hidden;
      height: 100%;
      border: dotted 1px #00ff00;
    }
    div {
      float:right;
      margin: 0 0 0 2em;
      max-height: 100%;
      overflow: auto;
      width: 5em;
      border: dotted 1px #ff0000;
    }
  </style>
</head>

<body>

  <div>
    This is the scrollable side bar. Add a bunch of text here to force the height to expand.
  </div>

  This is the main body. If you add a bunch of text here, you'll see how the overflow is cut off and a 2nd scroll bar does not appear.
</body>

</html>

以下是CSS的解释......

BODY ELEMENT

溢出：隐藏阻止滚动条显示在主页面上。
身高：100％设置身高以匹配窗口高度。
border：dotted 1px＃00ff00 仅添加以更清晰地显示body元素的周长。

DIV ELEMENT

float：right 将div移至页面右上角。您也可以使用固定定位，但这样可以防止身体内容在div下方流动。
保证金：0 0 0 2em 防止div过于接近身体内容。
最大高度：100％确保条形展开不超过窗口高度，强制滚动条显示
溢出：自动当div内容超过div高度时，div会显示滚动条
width：5em 防止div填充整个窗口宽度
border：dotted 1px＃ff0000 显示div的边界

编辑：上面的原始CSS在怪癖模式下工作，但滚动条无法显示HTML5文档类型。修复是使用固定定位而不是浮动。或者在侧杆div上设置绝对高度（而不是车身高度的百分比），因此侧杆的高度不依赖于车身元件的高度。

我认为问题是：body元素有一个“隐藏”溢出，以防止出现滚动条。但是，具有溢出而不是可见的元素将根据需要垂直扩展以包含任何浮动内容。因此，侧边div上的“max-height：100％”是没有意义的，因为body元素将扩展为div所需的任何高度。在div上使用固定定位可防止主体无限制地扩展以包含浮动元素。或者，使用绝对div高度，即使body元素不能，也会约束浮动div的高度。

如何通过主滚动滚动固定侧边栏而不引入另一个滚动条？

1 个答案: