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

0

您可以尝试将其包装成.wrapper这里的示例。然后它就会成为一种魅力。我怀疑 ff 无法正确测量高度，然后无法设置填充。这就是包装器的作用。这是我的猜测。ff 遇到类似问题也不是第一次了。

JSFIDDLE

于 2015-01-03T20:22:18.300 回答