terkel/sticky-footer.html

## sticky-footer.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Demo: CSS Sticky Footer</title>
<style>

body { width: 640px; margin: 0 auto; }
.header { background-color: silver; margin: 0 30px; }
.content-wrapper { padding: 0 20px; background-color: gray; }
.content { padding-left: 10px; padding-right: 10px; background: yellow; *zoom: 1; }
.content:after { display: block; clear: both; height: 0.01px; content: ""; }
.primary { float: left; width: 400px; height: 200px; background-color: silver; }
.secondary { float: right; width: 160px; height: 100px; background-color: silver; }
.footer { margin: 0 30px; background-color: pink; }

/* Sticky Footer */
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.header {
    height: 50px;
    margin-bottom: -50px;  /* height of header */
    position: relative;    /* to display front of content */
}
.content-wrapper {
    min-height: 100%;
    _height: 100%;         /* min-height for IE6 */
}
.content {
    padding-top: 70px;     /* height of header + padding-top of content */
    padding-bottom: 120px; /* height of footer + padding-bottom of content */
}
.footer {
    height: 100px;
    margin-top: -100px;    /* height of footer */
}
</style>
</head>
<body>

<div class="header">Header</div>

<div class="content-wrapper">
    <div class="content">
        <div class="primary">Primary content</div>
        <div class="secondary">Secondary content</div>
    </div>
</div>

<div class="footer">Footer</div>

</body>
</html>