1

// 編集: ここでこのフィドルを参照してください: 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;ですか?

4

1 に答える 1