фиксированный верхний/нижний колонтитул, содержание жидкости с запасом

Question

Я сделал конструкцию с фиксированным верхним и нижним колонтитулом с жидкой средой.

У меня средний размер, но проблема в том, что полоса прокрутки не маржирована.

Вот что я сделал: http://jsfiddle.net/xXxV4/

Как вы можете видеть, полоса прокрутки плотно прилегает к заголовку, сноске и с правой стороны. Я хочу, чтобы он содержал div с краем 20 пикселей.

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/