css - 固定页眉/页脚，带边距的流动内容

Question

我做了一个带有固定页眉和页脚的设计，中间有一个液体。

我的中间有边距，但问题是滚动条没有边距。

这是我所做的：http: //jsfiddle.net/xXxV4/

如您所见，滚动条紧贴页眉、页脚和右侧。我希望它具有 20px 边距的内容 div

Answer 1

这是你想要的吗？

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 20px 0px 20px 0px; /* NEW */
}

因此，滚动条也有 20px 的边距。

Answer 2

你的#main元素是position: absolute，所以你可以right: 20px吗？

#content{
    padding: 20px 0 0 20px;
    overflow: auto;
}

#main{
    position: absolute;
    top: 50px;
    overflow: auto;
    bottom: 40px;
    right: 20px;
    width: 100%;
}

http://jsfiddle.net/userdude/xXxV4/5/