css - 固定ヘッダー/フッター、マージンのある液体コンテンツ

Question

ヘッダーとフッターが固定され、中央が液体のデザインを作成しました。

余白に真ん中がありますが、問題はスクロールバーが余白になっていないことです。

これが私が作ったものです：http： //jsfiddle.net/xXxV4/

ご覧のとおり、スクロールバーはヘッダー、フッター、右側にしっかりと固定されています。20pxのマージンでコンテンツdivを持たせたい

Answer 1

あなたの#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/

Answer 2

これは、あなたの望むことですか？

::-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 のマージンが確保されます。