填補了父母箱

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，與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/

該解決方案的吸引人之處是，你不需要指定頁眉和頁腳元素的高度。

請注意，表格的高度計算算法可能因瀏覽器而異，因此您可能會發現在舊版瀏覽器中可能會以不同方式呈現表格的一些變體。

結果是這樣的：

Answer 2

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

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

jsFiddle example