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.

I am designing a cross html5-css3 site, and trying to make it look the same for every (common) browser.

This is what I have: 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) #contenido line height is used to make it fit in Safari and Chrome.

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%;}

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.

as you can see, #contenedor wont fit 100% height on Opera and IE. How can I fix this?

I'm really new to css styling and stuff, so I don't get what is wrong.

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.)

回答1:

I couldn't make it as I were, so this is what I did.

CSS File:

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

回答2:

You may try to use the min-height IE hack :

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

Hope this helps!

来源：https://stackoverflow.com/questions/11812759/css3-height-100

标签

html5

css3

html

height