javascript - Firefox 忽略填充底部与 box-sizing :border box

Question

Firefox 忽略 padding-bottom with box-sizing:border box。 我正在尝试将两个子 div 放入 300px 的容器 div 中。 child1 - 高度 100%； child2 - 从底部高度 100px；

child1 有 border box 和 padding-bottom:100px 这应该将 child1 的高度降低到 (100% - 100px) 让位给 child2。 此实现在 webkit 中运行良好，但 firefox 失败。 有解决办法吗？我不想使用 css calc()。

这里是例子 - http://jsfiddle.net/827D6/1/

使用的CSS:

.container{
 height:300px;
 width:300px;   
 background-color:black;
}
.child1{
    height:100%;
    background-color:red;
    position:relative;
    padding: 20px 20px 100px;
    box-sizing: border-box;
    overflow-y:auto;
    word-wrap:break-word;
}
.child2{
    height:100px;
    position:relative;
    background-color:green;
    bottom:100px;
}

Answer 1

您可以轻松地使用绝对位置。只需将容器设置为relative 并将第二个 child 的高度设置为bottom:0。然后将第一个 child 设置为 top:0;bottom:100px;。

.container {
    position:relative;
    height:300px;
    width:300px;
    background-color:black;
}
.child1 {
    background-color:red;
    position:absolute;
    top:0;
    right:0;
    bottom:100px;
    left:0;
    padding: 20px 20px 0;
    overflow-y:auto;
    word-wrap:break-word;
}
.child2 {
    height:100px;
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    background-color:green;
}

DEMO