title: CSS3 Height 100%
body: <p>I don't know how to ask/write this, so feel free to update the name or point me to the correct question/title. </p>
  
  <p>I am designing a cross html5-css3 site, and trying to make it look the same for every (common) browser.</p>
  
  <p>This is what I have: 
  <a href="http://www.pojotlan.com/example1/" rel="nofollow">http://www.pojotlan.com/example1/</a></p>
  
  <p>It works fine with Firefox 14.0.1, Chrome 21.0.1180.6 and Safari 5.1.7, this, with (file:estilo.css) <code>#contenido</code> line height is used to make it fit in Safari and Chrome. </p>
  
  <p>this is the short version of the included 3 css files...</p>
  
  <pre><code>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%;}
  </code></pre>
  
  <p>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.</p>
  
  <p>as you can see, <code>#contenedor</code> wont fit 100% height on Opera and IE. How can I fix this?</p>
  
  <p>I'm really new to css styling and stuff, so I don't get what is wrong.</p>
  
  <p>Thank you in advance :)</p>
  
  <p>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.)</p>