// 編集: ここでこのフィドルを参照してください: http://jsfiddle.net/hotu2n91/ご覧のとおり、これは最小限のテスト環境と同じ問題です。
ナビゲーションの配置に問題があります。あなたが読んでいる間、ここで問題を見ることができます: http://jsfiddle.net/vgugd8no/
*{
margin:0;
padding:0;
}
body, html{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.overlay{
position:fixed;
background:blue;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
.overlay .content{
width:100%;
height:400px;
background:yellow;
border-right:10px solid black;
}
.overlay .navigation{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
overflow:auto;
background:green;
/* !IMPORTANT */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
z-index:10;
padding-bottom:20px;
}
ご覧のとおり、position:fixed;
オーバーレイとナビゲーションも含まposition:fixed;
れています。たとえば、ナビゲーションから 20px を削除しますが、100% のままにします。したがって、値は 100%-20px になります。これがbox-sizing:border-box;
目的です。しかし、現在 FireFox では動作しないため、助けが必要です。コンテンツのスクロールバーと重ならないようにナビゲーションを調整したい。動作しないのはなぜbox-sizing:border-box;
ですか?