填补了父母箱

所有可用的高度我有这样的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的清洁版本。真实的例子有顶部，底部和左边的固定栏。我所试图做的是添加第二个左侧边栏...

来源

2014-06-17 jbatista

这里是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，与width: 100%申请display: table（否则就变成收缩到合适）。

对于.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

来源

2014-06-17 19:09:53

是的，就是这样！：D我试图将高度设置为100％，但没有显示表格和表格行，body元素获得父框的总高度而没有折扣其他子元素（页眉和页脚）。非常感谢！ – jbatista

很高兴帮助！请记住接受答案。 :) –

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

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

jsFiddle example

来源

2014-06-17 17:21:49 j08691

在我的情况下，真实的，它假定.box的的400像素，而不减去.box的车身和.box的英尺高度... – jbatista

填补了父母箱

回答

相关问题