Question

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

Answer 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

Answer 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;
    }
}

Firefox使用box-sizing：border框忽略padding-bottom

2 个答案: