固定页眉/页脚，带有余量的液体内容

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/