html5 css高度100%,html - CSS3 Height 100% - Stack Overflow

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.

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