CSS layout with header, footer and multiple 100% min-height content columns

css, html

Solution

While not a semantically desirable solution, the only way I could find to achieve all stated requirements is to go back to the 90s and use tables for layout.

See the fiddle here.

HTML:

<!DOCTYPE html>
<html>    
<head>
    <meta charset="utf-8">
</head>
<body>
    <table class="outer">
        <tr>
            <td class="header" colspan="3">header</td>
        </tr>
        <tr class="content">
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
        </tr>
        <tr>
            <td class="footer" colspan="3">footer</td>
        </tr>
    </table>
</body>
</html>

CSS:

html, body {
    height: 100%; margin: 0;
}
.outer {
    min-height: 100%;
    height: 100%;

    width: 500px;
    margin: 0 auto;
}
.header, .footer {
    height: 25px; background-color: #999;
}
.content td {
    width: 33%;
    background-color: #eee;
    border-right: 1px dashed #c00;
    vertical-align: top;
}

Problem

This is what I want to achieve: - Footer should stay at the bottom of the screen even if the content doesn't fill the viewport vertically. - Content columns have a border that should always be 100% content height. As the number and width of columns will change from page to page, background-image to fake column borders can’t be used. - There should be no scrollbars when all content is visible (Example 1). - Solution should be all HTML/CSS, no JS. - Minimum browser support should be IE9+ and latest desktop versions of Firefox, Chrome, Safari, Opera; with no quirks mode. - Width of the header/footer/content is always fixed (so header and footer don’t need to be placed inside content area). Height of header and footer is also fixed. I’ve tried techniques from Fluid Width Equal Height Columns and this sticky footer example but haven’t been able to satisfy all the requirements at the same time. Any tips are appreciated. Edit: So far the farthest I’ve got is by imitating tables which works correctly in webkit browsers but not in IE9 and Opera. See the fiddle here. HTML: ``` <div class="table outer"> <div class="row header"> <div class="cell">header</div> </div> <div class="row content"> <div class="cell"> <div class="table inner"> <div class="row"> <div class="cell">content 1</div> <div class="cell">content 2</div> <div class="cell">content 3</div> </div> </div> </div> </div> <div class="row footer"> <div class="cell">footer</div> </div> </div> ``` CSS: ``` html, body { height: 100%; } .table { display: table; min-height: 100%; height: 100%; } .table.outer { width: 500px; margin: 0 auto; } .row { display: table-row; } .cell { display: table-cell; } .header, .footer { height: 25px; background-color: #999; } .content { background-color: #eee; } .table.inner { width: 100%; min-height: 100%; height: 100%; } .table.inner .cell { width: 33%; border-right: 1px dashed #c00; } ```

Original source