100% height two-column layout with header & footer.

CSS Part:

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;

    header, footer {
        position: fixed;
        left: 0;
        right: 0;
        height: 20px;
        background-color: red;
        /* Specify a background color so the content text doesn't
        bleed through the footer! */

    header {
        top: 0;

    footer {
        bottom: 0;

    main {
        height: 100%;
        -moz-box-sizing: border-box;
        /* Ensure that the height of the element includes the  box border, 
           not just the content */
        box-sizing: border-box;
        border: 0;
        /* Leave some space for the header and footer to  overlay. */
        border-top: 20px solid white;
        border-bottom: 20px solid white;            

    aside {
        background-color: green;
        width: 300px;
        height: 100%;
        float: left;

    section#right {
        background-color: white;


HTML Part:

<!DOCTYPE html>
    <title>Full Height Body with header & footer</title>

        <aside id="left">&lt;aside&gt;&lt;/aside&gt;</aside>
        <section id="right">
        <div class="clearfix"></div>


This solution is taken from this StackOverflow post.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s