100％高度css

我有3個div並排放置在一個容器div中。每個div在不同的頁面上都會有不同的內容，所以我需要每個嵌套的div伸展到div內容最多的高度。我嘗試過使用'height：100％'和'height：auto'，但都沒有效果。請有人幫助我或指出我正確的方向。我的html是：100％高度css

<div id="container"> 
    <div id="column1"></div> 
    <div id="column2"></div> 
    <div id="column3"></div> 
</div>

非常感謝提前。

來源

2012-01-19 metallikat79

[？CSS - 高度相等列]的可能重複（http://stackoverflow.com/questions/2114757/css-equal-height-columns ） - 這個問題的問題太多了。任何搜索嘗試都會顯示你在互聯網上的結果和SO。我昨天投票結束了一個類似的問題。 – Rob

[在雙列頁面上，如何使用CSS或Javascript將左側div增長到正確div的相同高度？]（http://stackoverflow.com/q/35699/），[3和2列全屏（寬度和高度）佈局（CSS）]（http://stackoverflow.com/q/574317/） – outis

在所有3周內部的div使用display: table-cell：

#container div { display: table-cell; }

這裏有一個Working Example.

來源

2012-01-19 12:52:25

你可以使用jQuery？

如果是嘗試：http://jsfiddle.net/Rnf82/2/

的問題{顯示：表細胞;}是，它不是由舊版本的IE

的支持

來源

2012-01-19 13:06:42 giker

雖然真相的回答是最好的，certain browsers（秋後算賬）不要正確實現表格單元格。

作品跨瀏覽器的解決方案是分配過多的垂直填充和反餘量。例如：

<div class="container"> 
    <div class="column" style="background: #cc0000;">blah</div> 
    <div class="column" style="background: #00cc00;">blah<br />blah<br />blah</div> 
    <div class="column" style="background: #0000cc;">blah<br />blah</div> 
</div>

和CSS：

.container { 
    width: 300px; 
    height: auto; 
    overflow: auto; 
} 

.container div.column { 
    float: left; 
    width: 100px; 
    height: auto; 
    padding: 0 0 1000px 0; 
    margin: 0 0 -1000px 0; 
}

來源

2012-01-19 13:34:27 PoxBlossom

回答

相關問題