我不知道怎么问/写这个，所以请随时更新名称或指出正确的问题/标题。
我正在设计一个跨 html5-css3 的网站，并试图让它在每个(通用)浏览器上看起来都一样。
这是我的: http://www.pojotlan.com/example1/
它在 Firefox 14.0.1、Chrome 21.0.1180.6 和 Safari 5.1.7 上运行良好，这与 (file: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、Opera 12 上看到相同的外观。
如您所见，#contenedor 在 Opera 和 IE 上不会适合 100% 的高度。我该如何解决这个问题？
我对 css 样式和东西真的很陌生，所以我不明白哪里出了问题。
提前谢谢你:)
附言。是的，也许我用 css display:table 和其他东西搞砸了一切，但这就是谷歌发送给我的地方......哈哈 xD 所以，是的，你基本上可以告诉我在没有表格的情况下重新开始。 (我已经在尝试了，但结果较少。)
最佳答案
我做不到，所以这就是我所做的。
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
关于html - CSS3 高度 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11812759/