製作小孩div填充其容器的高度，而不使用任何明確的高度

Question

我有一個菜單欄，其中包含一些子元素（包括輸入框，2個下拉菜單和1個用於顯示菜單下的divbox的鏈接酒吧）。 http://jsfiddle.net/thapar/GLwRr/

菜單欄當前符合最大高度的子元素的高度。我想要菜單欄的其他子元素也要尊重最大的子元素的高度。但是，除非我給菜單欄設置了明確的高度，否則任何孩子都不能使用height:100%。

有沒有辦法讓子元素填充菜單欄的高度，而不使用像素/ em的顯式高度？

Answer 1

如果你的容器是相對的，並且你的孩子是相對的，你可以使用top：和bottom：css屬性來實現。

查看這個jsbin項目，瞭解我在說什麼。大多數項目都有一個明確定義的頭部部分，以保持其高度，所以這種解決方案在這種情況下會有效。如果您的佈局是完全動態的，我不確定如何在沒有JavaScript解決方案的情況下做到這一點。

http://jsbin.com/onubed/1/

Answer 2

設置容器display: table;和子元素display: table-cell;對CSS可以給你想要的結果。