3

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

我正在设计一个跨 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 所以，是的，你基本上可以告诉我在没有桌子的情况下重新开始。（我已经在尝试了，但结果较少。）

4

2 回答 2

4

我不能像我一样做到这一点，所以这就是我所做的。

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-11T02:17:22.657 回答
0

您可以尝试使用min-heightIE hack：

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

希望这可以帮助！

于 2012-08-05T08:03:52.523 回答