Header/Footer Layout with 100% Content Height in IE8

Question

I\'ve been trying to figure how to achieve this without JavaScript and padding and so far it\'s been mission impossible. Does anyone know if there is any way with pure CSS a

Answer 1

Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/ For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/

CSS:

#content{
   margin: 0 auto;
}

Remove this from your css:

  .tableContent * {
     height: 100%;
     vertical-align: middle;
     margin: auto;
 }

Removing the asterisk fixed everything.

Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/

HTML:

  <div id="container">
      <div class="header">
         <h4>This is header</h4>
      </div>
      <div class="row">
         <div class="content">
            <div class="left">Left Col</div>
            <div class="middle">Middle Col<br  />
               Middle Col<br  />
               Middle Col<br  />
               Middle Col<br  />
               Middle Col<br  />
            </div>
            <div class="right">Right Col</div>
         </div>
    </div>
    <div class="footer">
         <h4>This is footer</h4>
    </div>
</div>

CSS:

    html, body {
         height: 100%;
         margin: 0;
         padding: 0;
    }

    #container {
       display: table;
       height: 100%;
       width: 100%;
       text-align: center;
   }

   .row  {
    display: table-row;
    width:100%;
    height: 100%;

   }

   .header, .footer{
     background: pink;
     display:table-row;
     text-align: center;
     vertical-align: middle;
   }

   .content {
       display: table;
       background: brown;
       width:100%;
       height: 100%;
       overflow: auto;
    }
   .left, .right{
      background: green;
      display: table-cell;
      width:10%;
      vertical-align: middle;
    }
    .middle{
       background: brown;
       display: table-cell;
       vertical-align: middle;
    }