CSS：滚动条右侧的水槽 我的页面中间有一个漂亮的div。 在顶部有一个菜单分区。在左侧有另一个分区

div有边距，因此它们之间有很好的排水沟。 到目前为止还不错

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

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

---

div需要一个

右填充：20px

以便滚动条和内容之间的空间变成20px

div
{
    overflow-y:auto;
    width:100px;
    height:100px;
    padding-right:20px;
}

---

尝试使用自定义滚动条，类似这样您可以有更多选项来自定义它

您可以制作一个具有滚动条（

overflow-y

属性）的外部容器，并放置一个具有所需背景的较小内容容器，以便内部元素和外部滚动条之间的间隙模拟一个边沟：

HTML

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

您还可以通过将

宽度：95%

替换为

右边距

值来固定排水沟的宽度，例如：

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

---

也可以使用设置为

内容框

的属性，并向元素添加一些

右键填充

，使用单个元素来重现该属性：

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

---

不，哇，这似乎真的是我想要的。。。我会尝试一下，让你知道它是否有效。。。等等，你的意思是宽度，高度100%？@Zo72把它们放在你喜欢的地方，我把它们设置为100px只是为了在小提琴上测试。它不起作用。。。右边的填充不允许主div的背景通过，因此可能会发出jsfiddlelink@Zo72我更新了答案，不需要父div，只需将它们应用于div本身，提琴中有一个带有背景色的例子。对于这么简单的东西来说，这太复杂了。你可以尝试做一些类似#somediv:：-webkit滚动条{margin:0 20px 0；}的事情，但这只适用于webkit:SHave you threaded

margin right:20px页面中间的主div？也许可以提供一个小分区，以便我们更好地了解您的布局。对于现代浏览器，您可以使用背景渐变来模拟檐槽，对于较旧的浏览器，可以使用内容向左浮动的子分区，以及带有透明背景的滚动条的外部分区。你明白了。是的，它将滚动条移到主分区附近。它不会离开边沟。@Fabricio Matte'你能告诉sketch内容浮动到左侧和外部分区吗。。。不能这么做浮动只是一种表达方式，以下是我在阅读你的问题时理解的基本概念：
.content {
  width:80%;
  height:150px;
  overflow-y:scroll;
  background:white;
  background-clip: content-box;
  padding-right:40px;
}