最佳等分高度選項？

好吧，讓平等的高度發展是一個相當的過程。似乎有很多方法可以做到這一點。我想用CSS，因爲我很糟糕，所以希望有人能幫我一把。最佳等分高度選項？

這是我的基本佈局。 http://jsfiddle.net/SineMetu/nWXyu/1/

（對不起，我在CSS的大量背景梯度）

我想所有的div是最高div的高度。我需要它能夠在頁面重新調整大小時動態（流暢地）更改高度。所以基本上所有的div都會調整到最高的div，因爲它是重新調整大小的。

這樣做的最好方法是什麼？

來源

2012-06-13 Joe Titterton

可能重複 - 等高度列？]（http://stackoverflow.com/questions/2114757/css-equal-height-columns） – derekerdmann

這很可能是這個問題將被關閉。有很多問題已經涵蓋了這個主題，請在您提出已經回答的問題之前嘗試搜索。你的問題應該是你的問題實現了你自己發現的技術之一 - 在回答你的問題時，有人可能會給你一個關於如何更好地編寫代碼的建議。 – Wex

是的，這是我的主要問題，對不起，如果不明確 –

的最好最優雅的方式，使現代* broswers等高列是設置每一個display: table-cell;

<div id="page"> 
<div class="column one">one</div> 
<div class="column two">two</div> 
<div class="column three">three</div> 
</div> 

<style> 
html, body { 
height: 100%; 
margin: 0; 
padding: 0; 
} 
div#page { 
display: table; 
table-layout: fixed; /* this prevents column width from changing with content */ 
width: 100%; 
height: 100%; 
} 
div.column { 
display: table-cell; 
width: 33%; 
height: 100%; 
} 
div.one { 
background-color: #CCC; 
} 
div.two { 
background-color: #999; 
} 
div.three { 
background-color: #666; 
} 
</style>

*）基本上，這部作品在所有的瀏覽器IE除外6和7

來源

2012-06-13 05:03:06

謝謝，我會試試這個。 –

對不起，但對於不兼容的方法使用「最佳」一詞可能實際上並不是「最好的」。看到鏈接的SO問題：http://stackoverflow.com/questions/2114757/css-equal-height-columns – Jesse

夠公平的，那麼「最優雅」如何抓住你呢？ –

我會同時使用css和html來實現兩個div上的相等高度。

<div class="container"> 
    <div class="equal-height"></div> 
    <div class="equal-height"></div> 
</div> 

.container { overflow: hidden; } 
.equal-height { margin-bottom: -99999px; padding-bottom: 99999px !important; }

來源

2012-06-13 06:15:40

這個解決方案在歌劇中被打破 –

這很醜陋。但我相信像IE6/7這樣的方法有效，所以OP可能希望將它包含在條件樣式表中，僅適用於IE6＆7。儘管「！重要」在這裏毫無意義。 –

你可以使用CSS表格獲得您想要的結果其簡單理解看到的演示： - http://jsfiddle.net/nWXyu/5/

http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

[CSS的

來源

2012-06-13 07:17:05

最佳等分高度選項？

回答

相關問題