Firefox 使用 box-sizing:border 框忽略 padding-bottom答案

【问题标题】：Firefox ignores padding-bottom with box-sizing:border boxFirefox 使用 box-sizing:border 框忽略 padding-bottom
【发布时间】：2014-06-30 14:18:39
【问题描述】：

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

child1 有边框和 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;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以轻松地使用绝对位置。只需制作容器relative 并将第二个孩子的高度设置为bottom:0。然后将第一个孩子设置为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

【讨论】：

这也更有意义，因为滚动条不只是消失在 child2 下方。
感谢您的回复，但在我的场景中，有另一个 div 作为侧栏，它贯穿我的容器 div 的高度，侧栏 div 是绝对的。链接：jsfiddle.net/827D6/5。 Width:100% 将使我的 div 脱离包装。
@user1748439 如果那也是相对父级的子级，那么没关系，它们都可以是绝对位置。你能更好地解释一下吗？此外，您的 jsfiddle 也不会改变原来的。
@user1748439 我看到更新的 jsfiddle 链接。你能更好地解释蓝色 div 应该如何放置吗？为什么我目前的答案不起作用？我想解决这个问题。

【解决方案2】：

试试这个：

.element {
    display:block;
    padding:10px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}
.element::before, .element::after {
    content:"";
    display:table;
    width:100%;
    height:0;
    clear:both;
}
@-moz-document url-prefix() {  
    .element::after {
        height:10px;
    }
}

【讨论】：