Question

我不知道如何询问/写这个，所以请随时更新名称或指出我正确的问题/标题。

我正在设计一个跨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样式和东西的新手，所以我没有弄错。

提前谢谢你：）

PS。是的，也许我用css显示器弄乱了所有东西：桌子和东西，但谷歌发给我的那个...哈哈xD所以，是的，你基本上可以告诉我重新开始没有桌子。（我已经尝试过，效果较差。）

Answer 1

我无法像现在这样做，所以这就是我所做的。

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

Answer 2

您可以尝试使用min-height IE hack：

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

希望这有帮助！

CSS3高度100％

2 个答案: