3

我的页面中间有一个不错的 div。顶部有一个菜单 div。在左边有另一个 div。

div 有边距，因此它们之间有很好的排水沟。到现在为止还挺好。

唯一的问题是，如果我在页面中间的 div 在内容中增长，则会出现一个滚动条（这没关系），但我想要的是在 div 和滚动条之间有一个排水沟？是否可以 ？

+-----------+  ^   (see gap 20px between scrollbar and div)
|           |  |
|           |  | 
|           |  |
|           |  |
|           |  |
|           |  |
+-----------+
4

3 回答 3

1

您可以制作一个具有滚动条（属性）的外部容器，overflow-y并放置一个具有所需背景的较小内容容器，因此内部元素和外部滚动条之间的间隙模拟了一个排水沟：

HTML

<div class="outer">
    <div class="inner">
       <!-- content goes here -->
    </div>
</div>

CSS

.outer {
  width:80%;
  height:150px;
  overflow-y:scroll;
}

.inner {
  width:95%;
  background:White;
}

演示

您还可以通过将 替换为width:95%一个margin-right值来固定装订线的宽度，例如：

margin-right:20px; /*20px gap between inner and scrollbar*/

演示

background-clip也可以使用设置为的属性并将content-box一些添加到元素中，使用单个元素来重现它padding-right：

.content {
  width:80%;
  height:150px;
  overflow-y:scroll;
  background:white;
  background-clip: content-box;
  padding-right:40px;
}

演示

虽然没有 IE<=8 支持这种方法。此外，该padding值应包括滚动条的宽度，否则，使用非常低的填充值会使装订线隐藏在滚动条下方。如果额外的填充破坏了您的布局，您可以将box-sizing属性设置为border-box.

于 2013-02-25T11:20:23.653 回答
0

div 需要一个padding-right:20px;，以便滚动条和内容之间的空间变为 20px。

看看这个

div
{
    overflow-y:auto;
    width:100px;
    height:100px;
    padding-right:20px;
}
于 2013-02-25T09:59:01.680 回答
0

尝试使用自定义滚动条，像这样，这样你就有更多的选择来自定义它

于 2013-02-25T10:00:23.673 回答