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

回答

相关问题