固定页眉/页脚，含有保证金的液体内容

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/