title: 100% Height layout with fixed header + overflow without JS
body: <p>i would like to achieve specific layout:</p>
  
  <pre><code>------------------------------
  Header - flexable height depending on content
  ------------------------------
  Content with overflow filling remaining space to 100% height
  ------------------------------
  + Some space after (padding/bottom?) ( 70px for example)
  ------------------------------
  </code></pre>
  
  <p>And this should have 100% height and 100% width of document. It seemed i cant use divs to achiev this so i was trying tables but i cant find way how to do that with crossbrowser compatibility (last try was working in everything except IE (of course) and was not well written). Could somebody give me some example working like that?</p>
  
  <p>I was looking at similar questions here but i cant find this specific situation.</p>
  
  <p><em>PS: sorry for my english - not my primary language</em></p>
  
  <p>EDIT: Some code i actualy have but it works on webkit now</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;style&gt;
          html, body
          {
              margin: 0px;
              padding: 0px;
              height: 100%;
          }
  
          #fixedHeaderTable
          {
              height: 100%;
              width: 100%;
              border: 0px solid black;
              margin: 0px;
          }
  
          #fixedHeaderTable td
          {
              vertical-align: top;
          }
  
          #fixedHeaderTable .headerRow
          {
              height: 0px;
          }
  
          #fixedHeaderTable .headerRow td
          {
              padding: 10px;
          }
  
          #T
          {
              overflow-y: auto;
              height: 100%;
              padding: 10px;
          }
  
          @-moz-document url-prefix() { 
            #content {
               padding-bottom: 140px;
            }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table id="fixedHeaderTable"&gt;
          &lt;thead style="height: 0px;"&gt;
          &lt;tr class="headerRow"&gt;
              &lt;td style="height: 1px;"&gt;
                  Header
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody style="height: 100%;"&gt;
          &lt;tr style="height: 100%;"&gt;
              &lt;td style="padding-bottom: 70px; height: 100%;"&gt;
                  &lt;div class="box" id="T"&gt;
                  Long content
              &lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>