Layout de cabeçalho / rodapé com 100% de altura do conteúdo no IE8

Question

Aug 30, 2014, 05:01 PM

Layout de cabeçalho / rodapé com 100% de altura do conteúdo no IE8

Eu tenho tentado descobrir como conseguir isso sem JavaScript e preenchimento e até agora tem sido missão impossível. Alguém sabe se existe alguma maneira com CSS e divs puros para obter um layout simples:

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

Isto é exatamente o que estou tentando fazer, mas com divs e 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;
}

Isso é o mais próximo que posso chegar do layout ... o que não consigo corrigir:

1) O conteúdo dentro da div Conteúdo deve estar alinhado verticalmente no meio (muito importante que o BG da célula de conteúdo também tenha 100% de altura, para que ele se conecte ao cabeçalho e rodapé)

2) Não deve haver transbordamento: este é umComportamento IE8 somente (tanto quanto eu poderia dizer), por isso será difícil ver no JsFiddle ... o código completo abaixo pode ser testado localmente com o modo de emulação do IE8:

<!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>