跨瀏覽器兼容的CSS液體佈局，3列100％寬度/高度

我開始基於this文章創建我的HTML/CSS佈局，並且更成功。然而，我認爲我搞砸了我的CSS，因爲這個網頁不是以相同的方式顯示在IE或Chrome/Firefox ...跨瀏覽器兼容的CSS液體佈局，3列100％寬度/高度

基本上，我的想法是有3個等寬列， 100％的身高。每列的內容應該在左側，頂部和右側有一些填充，'主'鏈接應該位於每列的底部，並在列的中心對齊。

這是我的佈局

enter image description here

你可以看到我目前的結果here的草圖。如果您在Chrome/Firefox瀏覽器中查看此頁面，您可以看到內容divs在我的頁面中「流血」，但是，在IE內容divs非常合適（我只爲了測試目的而在內容divs上加了邊框）。我不相信IE正在渲染我的CSS，而是我相信我在做我的CSS錯誤，但真的不知道是什麼。感謝您的幫助。

來源

2012-07-12 errata

創建一個小提琴plz – Neji 2012-07-12 10:08:24

小提琴在這裏[http://jsfiddle.net/kJL5m/](http://jsfiddle.net/kJL5m/），但它不會調整到100％高度在這裏：/ – errata 2012-07-12 10:13:16

你正在設置100％的高度，但也設置填充/邊距等，高度是內部高度和填充/邊距/邊框將被添加到此，從而導致溢出。

編輯：或者將填充/邊距/邊框設置爲百分比，以便它們+高度合計爲100％或使用javascript計算像素適當位置，以便以像素爲單位告訴您窗口高度，從而確定每列的正確高度。您可以隨時調整窗口大小，以便像css中的100％規則一樣。

來源

2012-07-12 10:01:54

啊，我明白了......我應該從我的div中刪除'padding-top：20px;'。如果我這樣做，似乎有點幫助...將嘗試玩這些百分比。 – errata 2012-07-12 10:14:52

如果您的css高度已經達到100％，則填充，邊距和邊框將全部添加到整體顯示的高度，那麼高度實際上會變爲100％+填充頂部+填充底部+邊距頂部+邊距底部+邊框底部寬度+邊框頂部寬度「 – 2012-07-12 10:17:22

跨瀏覽器兼容的CSS液體佈局，3列100％寬度/高度

回答

相關問題