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:

  

      

         
This is header
      
      

         

            
Left Col
            
Middle Col

               Middle Col

               Middle Col

               Middle Col

               Middle Col

            
            
Right Col
         
    
    

         
This is footer
    

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