如何設置一個div與另一個div具有相同的高度？

有以下簡單的結構：如何設置一個div與另一個div具有相同的高度？

<div id="container"> 
    <div id="header">...</div> 
    <div id="menu">...</div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
</div>

我需要的菜單和內容都得到了相同的高度，但我不能在恆定設置。我將這兩個項目的「min-height」設置爲「600px」，但現在「content」大於600px，但「menu」的大小爲600px。我該如何解決它？

來源

2013-04-11 user2218845

這是書中最古老的問題之一。發帖前請先搜索。例如[如何在不指定父母身高的情況下強制孩子分數達到父母分數的100％？]（http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents -div-without-specified-parents-heigh） – Boaz 2013-04-11 19:19:18

我在搜索，但我什麼也沒有 – user2218845 2013-04-11 19:20:27

如果沒有JavaScript/jQuery，恐怕你不能這樣做（如果你想擁有'menu'和'content '垂直堆疊）。 – 2013-04-11 19:32:03

如果你不那麼在乎IE6和IE7，最簡單的答案是設置

display: table-cell;

您的每個列

。只需檢查http://ie7nomore.com/css2only/table-layout/爲這個純粹的CSS2.1解決方案（這兩列是contenteditable，所以你可以很容易地添加一行和/或另一列的文本行和行）
而且不，它不是「使用表」，因爲有些人可能會爭論：CSS屬性display的table值呈現相同的方式作爲一個HTML元素table，但它仍然是一個div（即無）的語義或任何元素它的應用;）

那麼對於IE6和IE7，你可以使用條件註釋進行簡單的回退（如將背景應用於其中一個列，並且如果另一個在某些頁面中較長......不要忘記並忘記它，它是舊的IE，並且您的文本仍然可讀）

另一種方法（視覺把戲）是人造列

來源

2013-04-11 19:29:42 FelipeAls

如何演示和一些代碼？比試圖描述技術更好。 – cimmanon 2013-04-11 20:03:28

我所使用的顯示器技術：inline-block的，這是你在找什麼？

http://jsfiddle.net/SMxRs/1/

#header, #menu, #content, #footer { 
width: 600px; 
height: 500px; 
background: #ccc; 
padding-left: 10px; 
display: inline-block; 
} 
#container { 
width: 2500px; 
}

來源

2013-04-11 20:43:42 Cam

如何設置一個div與另一個div具有相同的高度？

回答

相關問題