CSS3身高100％

我不知道該怎麼寫/寫這個，所以隨時更新名稱或指向正確的問題/標題。CSS3身高100％

我正在設計一個交叉html5-css3網站，並試圖讓它看起來每個（通用）瀏覽器都是一樣的。

它正常工作與Firefox 14.0.1，鉻21.0.1180.6和Safari 5.1.7，這與（文件：estilo.css）#contenido線高度使用使其適用於Safari和Chrome。

這是包括3個css文件的短版...

html {height:100%;} 
body {height:100%;} 
div#Tabla {display:table; height:100%;} 
div.row.main {display:table-row-group; height:auto; min-height:100%;} 
div#main {display: table-cell; position: relative; height:auto; min-height:100%;} 
div#contenido {display:inline-block; position: relative; 
       height:100%; min-height:100%; line-height:100%;} 
section {height:auto; min-height:100%;}

如果我改變其位置以絕對的，我得到了在Chrome 21.0.1180.6和Safari 5.1.7，歌劇相同的外觀12.

正如你所看到的，#contenedor不適合Opera和IE的100％高度。我怎樣才能解決這個問題？

我真的很新的CSS樣式和東西，所以我不明白什麼是錯的。

預先感謝您:)

PS。是的，也許我用css顯示搞亂了一切：桌子和東西，但那是谷歌送我的地方......哈哈xD所以，是的，你基本上可以告訴我不用表格就可以重新開始。（我想已經，用更少的結果。）

來源

2012-08-04 pojomx

我無法如此，所以這就是我所做的。

CSS文件：

body, html {border: 0px; margin: 0px; padding: 0px; 
height:100%; position:relative; width:100%;} 
#head 
{ 
position:absolute; 
background-color: #98a; 
height: 100px; 
width:100%; 
top:0px; 
} 

#footer 
{ 
position:absolute; 
background-color: #e46; 
width:100%; 
height:20px; 
bottom:0px; 
} 

#content 
{ 
position:absolute; 
background-color: #dee; 
height:auto; 
top:100px; 
bottom:20px; 
width:100%; 
}

體：

<body> 

<div id="head">#head</div> 
<div id="footer">#footer</div> 
<div id="content">#content</div> 

</body>

的重要組成部分，是內容是絕對的，頂部/底部。

所以，這就是全部。謝謝：D

來源

2012-08-11 02:17:22 pojomx

可以找到一個例子：http://pojotlan.com/html5/test.html – pojomx 2012-08-11 02:18:00

您可以嘗試破解使用min-height IE：

body, html { 
    min-height:100%; 
    height:auto !important; 
    height:100%; 
}

希望這有助於！

來源

2012-08-05 08:03:52

回答

相關問題