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 and divs to achieve a simple layout:

Simple Layout

http://jsfiddle.net/zLzg8v3s/1/

This is exactly what I'm trying to do but with divs and CSS:

http://jsfiddle.net/u0u7snh6/1/

HTML

<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
    <div class="tableCell">
        <div>
            This is the top banner
        </div>
    </div>
</div>
<div class="tableRow tableContent">
    <div class="tableCell">
        <div id="content">
            This is the content
        </div>
    </div>
</div>
<div id="footer" class="tableRow" id="bottom">
    <div class="tableCell">
        <div>
            This is the footer
        </div>
    </div>
</div>
</body>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.table {
    display: table;
    height: 100%;
    width: 100%;

}
.tableRow {
    display: table-row;
    text-align: center;
    height: 1px;
}

.tableCell {
    display: table-cell;
    vertical-align: middle;

}

.tableCell div {
    max-width: 400px;
    margin: auto;
    background-color: brown;
}

.tableContent {
    height: 100%;
    background-color: yellow;
    vertical-align: middle;
}

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

.contentDiv {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

#header {
    background-color: pink;
}
#footer {
    background-color: orange;
}

This is as close as I can get to the layout... what I cannot fix:

1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)

2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:

<!doctype html>
<html lang="en-CA" prefix="og: http://ogp.me/ns#">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>MOCKUP</title>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .table {
            display: table;
            height: 100%;
            width: 100%;

        }
        .tableRow {
            display: table-row;
            text-align: center;
            height: 1px;
        }

        .tableCell {
            display: table-cell;
            vertical-align: middle;

        }

        .tableCell div {
            max-width: 1200px;
            margin: auto;
            background-color: brown;
        }

        .tableContent {
            height: 100%;
            background-color: yellow;
            vertical-align: middle;
        }

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

        .contentDiv {
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
        }

        #header {
            background-color: pink;
        }
        #footer {
            background-color: orange;
        }

    </style>
</head>
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
    <div class="tableCell">
        <div>
            This is the top banner
        </div>
    </div>
</div>
<div class="tableRow tableContent">
    <div class="tableCell">
        <div id="content">
            This is the content
        </div>
    </div>
</div>
<div id="footer" class="tableRow" id="bottom">
    <div class="tableCell">
        <div>
            This is the footer
        </div>
    </div>
</div>
</body>
</html>

Ani · Answer 1 · 2014-08-30T20:10:12.240

3

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

edited Aug 30 '14 at 20:10

answered Aug 30 '14 at 15:23

Ani

4,473
4
26
31

That does't work will if you add multiline content (at least in IE8) and the padding is still an issue : http://jsfiddle.net/zLzg8v3s/3/ – Nicolas Bouvrette Aug 30 '14 at 15:29
Check the second option..Updated answer..Thx for pointing it out – Ani Aug 30 '14 at 15:32
Actually have you tried this in IE8? It doesn't render well for me. This is the main problem here... I need to support IE8 unfortunately. – Nicolas Bouvrette Aug 30 '14 at 15:40
No..I didn't take a look at IE8...Let me check – Ani Aug 30 '14 at 15:50
Ok test now...Updated my answer...Tested IE8 too – Ani Aug 30 '14 at 16:04
Yes sorry maybe my question wasn't clear enough, but the brown background in the content section must be 100% height... this way I can have a header (full row of a color for example), same for the footer and then the content would have a white BG (for example) and be vertically aligned if its small. Also you could set a BG on the content row as fell... its a very simple layout to be honest and I got it working with tables - I was trying to see if we could do this in CSS. Let me know if you need more details I can try to post the table version. – Nicolas Bouvrette Aug 30 '14 at 16:11
This is what I'm trying to do without tables: http://jsfiddle.net/u0u7snh6/ (I also updated the question) - I have a weird feeling this is mission impossible... – Nicolas Bouvrette Aug 30 '14 at 16:26
@nbouvrette I updated my answer,with a new solution. Check it out. – Ani Aug 30 '14 at 20:10
You almost did it! the only problem is the height now.. in IE8 it does not show full height: http://jsfiddle.net/p1bbyfqa/2/show/ – Nicolas Bouvrette Aug 30 '14 at 20:45

Header/Footer Layout with 100% Content Height in IE8

1 Answers1

Linked