Question

我有这个html结构：

#### body #######################
#                               #
#      ###### .box #######      #
#      #    .box-header  #      #
#      ###################      #  
#      #                 #      #
#      #                 #      #            
#      #    .box-body    #      #
#      #                 #      #
#      #                 #      #
#      ###################      #
#      #   .box-footer   #      #
#      ###################      # 
#                               # 
#################################

您可以看到代码here。

供参考， HTML ：

<div class="box">
    <div class="box-header">
        <h1>.box-header</h1>
    </div>
    <div class="box-body">
        <h2>.box-body</h2>
        <p>This should fill up the available space in order to move the box-footer to the bottom.
            <br/><br/>
           If this it has been done right the red background should not be displayed.
        </p>            
    </div>
    <div class="box-footer">
        <h3>.box-footer</h3>
    </div>
</div>

和 CSS ：

body{
    height: 400px;
}
.box{
    padding: 0px;
    margin: 0px;
    height: inherit;
    background-color: red;
}
.box-header{
    background-color: green;
    padding: 0px;
    margin: 0px;
}

.box-header h1{
    padding: 10px;
    margin: 0px;
}

.box-body{
    background-color: blue;
}

.box-body p, .box-body h2{
    padding: 10px;
    margin: 0px;
    color: white;
}

.box-footer{
    padding: 10px;
    margin: 0px;
    background-color: black;
}

.box-footer h3{
    padding: 10px;
    margin: 0px;
    color: white;
}

有没有办法迫使.box-body填满.box的所有可用高度？

请注意，这是我的html的更简洁版本。真实的例子在顶部，页脚和左侧有一个固定的栏。我要做的是添加第二个左侧边栏...

Answer 1

以下是使用CSS表格的一种方法。

应用以下 CSS ：

body{
    height: 400px;
    margin: 0;
}
.box{
    padding: 0px;
    margin: 0px;
    height: inherit;
    background-color: red;
    display: table;
    width: 100%;
}
.box-header{
    background-color: green;
    padding: 0px;
    margin: 0px;
    display: table-row;
}

.box-body{
    background-color: blue;
    display: table-row;
    height: 100%;
}

.box-footer{
    padding: 10px;
    margin: 0px;
    background-color: black;
    display: table-row;
}

对于.box，请将display: table与width: 100%一起使用（否则会变得适合缩小）。

对于.box-header，.box-body，.box-footer，请设置display: table-row。

要强制.box-body占用最大高度，请设置height: 100%。

适用于最新版本的Firefox，Chrome和IE。

请参阅演示：http://jsfiddle.net/audetwebdesign/ntW6s/

此解决方案的一个吸引人的功能是您不需要为页眉和页脚元素指定高度。

请注意，表格的高度计算算法因浏览器而异，因此您可能会看到旧浏览器的某些变化可能会以不同的方式呈现表格。

结果如下：

enter image description here

Answer 2

只需将height:100%添加到.box-body：

.box-body{
    background-color: blue;
    height:100%;
}

<强> jsFiddle example

填写父框的所有可用高度

2 个答案: