Close

CSS - How to keep footer at the bottom for the body content shorter than screen height?

[Last Updated: Sep 8, 2017]

Wrap the whole page in a table with height 100%. Keep header and footer tds with fixed heights.

<html>
<head>
<style>
table.page{
 height: 100%;
 width: 100%;
}
td.header{
 height: 50px;
 background: #9df;
}
 td.body{
 background: #bfb;
}
td.footer{
 height:50px;
 background:pink;
}
</style>
</head>
<body>
<table class="page">
    <tr>
        <td class="header">Header</td>
    </tr>
    <tr>
        <td class="body">body</td>
    </tr>
    <tr>
        <td class="footer">Footer</td>
    </tr>
</table>
</body>
</html>

Output