Css 带位置的边框框：修复了FireFox中不显示填充的问题

//编辑： 请看这里的这把小提琴：正如您所看到的，在最小的测试环境中，这也是同样的问题

我的导航定位有问题。阅读时，您可以在此处查看问题：

正如你所见，我有一个立场：固定；覆盖和导航也与位置：固定；在里面。现在我想从导航中删除例如20px，但保留100%。所以这个值是100%-20px。这就是框大小：边框框；这是给你的。但目前它在FireFox中不起作用，我需要一些帮助。我想调整导航，使其不会与内容滚动条重叠。为什么我的框大小：边框框；不起作用？

您可以尝试将其包装成。包装器就是一个例子。那么它将成为一种魅力。我怀疑ff无法正确测量高度，因此无法设置填充。这就是包装的意义。那是我的猜测。这不是ff第一次遇到类似问题

---

你真正的问题是什么？底部20px的填充显示得很好。另外，不要使用内嵌样式。我用CSS部分的样式做了一个演示，因为它们应该是我使用的FF v30，对我来说填充将不会出现。你使用什么浏览器/操作系统？我知道了。在发布之前，你应该测试跨浏览器：P我在Chrome 37上。我不知道为什么Firefox不喜欢这个…但是会提供div:after{display:block；content:；height:20px；}作为快速修复响应。解决方法。@CBroe看到这个摆弄您的更改：正如您所看到的，没有任何更改

*{
    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;
    }