CSS3高度100％ [英] CSS3 Height 100%
问题描述
我不知道如何问/写这个，所以随时更新名称或指向我正确的问题/标题。
I don't know how to ask/write this, so feel free to update the name or point me to the correct question/title.
我正在设计一个交叉html5-css3网站，并尝试让它看起来与每个（通用）浏览器相同。
I am designing a cross html5-css3 site, and trying to make it look the same for every (common) browser.
这是我所拥有的：
http://www.pojotlan.com/example1 /
它适用于Firefox 14.0.1，Chrome 21.0.1180.6和Safari 5.1.7，这与（文件：estilo.css） #contenido 线高度用于使其适合Safari和Chrome。
It works fine with Firefox 14.0.1, Chrome 21.0.1180.6 and Safari 5.1.7, this, with (file:estilo.css) #contenido line height is used to make it fit in Safari and Chrome.
这是所包含的3个css文件的简短版本...
this is the short version of the included 3 css files...
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，Opera 12。
if I change its position to absolute, i got the same look on Chrome 21.0.1180.6 and Safari 5.1.7, Opera 12.
，您可以看到 #contenedor wont适合100％高度在Opera和IE。我如何解决这个问题？
as you can see, #contenedor wont fit 100% height on Opera and IE. How can I fix this?
我真的很喜欢css的样式和东西，所以我不知道是什么问题。
I'm really new to css styling and stuff, so I don't get what is wrong.
提前感谢：）
ps。是的，也许我可以用css显示：表和东西，但是那里google发送我...哈哈xD所以，是的，你可以基本上告诉我，没有表再次开始。 （我已经尝试，结果较少。）
ps. yes, maybe I am messing everything with css display:table and stuff, but thats where google sent me... haha xD so, yes, you can basically tell me to start again without tables. (I am trying that already, with less results.)
推荐答案
我无法使它像我一样，所以这是我做了。
I couldn't make it as I were, so this is what I did.
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：
<body>
<div id="head">#head</div>
<div id="footer">#footer</div>
<div id="content">#content</div>
</body>
重要的部分是内容是绝对的，顶部/底部。
The important part, was that content is absolute, and top/bottom.
所以，这是所有。
谢谢：D
so, this is all. thank you :D
这篇关于CSS3高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
