Header/Footer Layout with 100% Content Height in IE8

问题

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:

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>

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

来源：https://stackoverflow.com/questions/25583701/header-footer-layout-with-100-content-height-in-ie8

标签

html

css

header

footer