Html CSS3 高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11812759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Height 100%
提问by pojomx
I don't know how to ask/write this, so feel free to update the name or point me to the correct question/title.
我不知道如何问/写这个，所以请随时更新名称或指向正确的问题/标题。
I am designing a cross html5-css3 site, and trying to make it look the same for every (common) browser.
我正在设计一个跨 html5-css3 站点，并试图使其对于每个（常见）浏览器看起来都相同。
This is what I have: http://www.pojotlan.com/example1/
这就是我所拥有的：http: //www.pojotlan.com/example1/
It works fine with Firefox 14.0.1, Chrome 21.0.1180.6 and Safari 5.1.7, this, with (file:estilo.css) #contenidoline height is used to make it fit in Safari and Chrome.
它适用于 Firefox 14.0.1、Chrome 21.0.1180.6 和 Safari 5.1.7，使用 (file:estilo.css)#contenido行高使其适合 Safari 和 Chrome。
this is the short version of the included 3 css files...
这是包含的 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%;}
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.
如果我将其位置更改为绝对，我在 Chrome 21.0.1180.6 和 Safari 5.1.7、Opera 12 上得到相同的外观。
as you can see, #contenedorwont fit 100% height on Opera and IE. How can I fix this?
如您所见，#contenedor在 Opera 和 IE 上不适合 100% 的高度。我怎样才能解决这个问题？
I'm really new to css styling and stuff, so I don't get what is wrong.
我对 css 样式和东西真的很陌生，所以我不明白有什么问题。
Thank you in advance :)
先感谢您 ：）
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.)
附：是的，也许我用 css display:table 和其他东西搞乱了所有东西，但这就是 google 发给我的地方...哈哈 xD 所以，是的，你基本上可以告诉我没有表格重新开始。（我已经在尝试，但结果较少。）
回答by pojomx
I couldn't make it as I were, so this is what I did.
我不能像我一样做到这一点，所以这就是我所做的。
CSS File:
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.
重要的部分是内容是绝对的，顶部/底部。
so, this is all. thank you :D
所以，这就是全部。谢谢：D
回答by Endre Simo
You may try to use the min-heightIE hack :
您可以尝试使用min-heightIE hack：
body, html {
min-height:100%;
height:auto !important;
height:100%;
}
Hope this helps!
希望这可以帮助！
