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

CSS Part:

<style>
    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;
        overflow:auto;
    }

    .clearfix{
        clear:both;
    }
</style>

HTML Part:

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

</head>
<body>
    <header>&lt;header&gt;&lt;/header&gt;</header>
    <main>
        <aside id="left">&lt;aside&gt;&lt;/aside&gt;</aside>
        <section id="right">
            &lt;section&gt;&lt;/section&gt;
        </section>
        <div class="clearfix"></div>
    </main>   
    <footer>&lt;footer&gt;&lt;/footer&gt;</footer>
</body>
</html>

JSFIDDLE, CODEPEN

This solution is taken from this StackOverflow post.

Sticky Header and Footer using CSS

        /* Reset body padding and margins */
        body {
            margin: 0;
            padding: 0;
        }

        /* Make Header Sticky */
        #header_container {
            background: #eee;
            border: 1px solid #666;
            height: 60px;
            left: 0;
            position: fixed;
            width: 100%;
            top: 0;
        }

        #header {
            line-height: 60px;
            margin: 0 auto;
            width: 940px;
            text-align: center;
        }

        /* CSS for the content of page. I am giving top and bottom padding of 80px to make sure 
           the header and footer do not overlap the content.*/
        #container {
            margin: 0 auto;
            overflow: auto;
            padding: 80px 0;
            width: 940px;
        }

        #content {
        }

        /* Make Footer Sticky */
        #footer_container {
            background: #eee;
            border: 1px solid #666;
            bottom: 0;
            height: 60px;
            left: 0;
            position: fixed;
            width: 100%;
        }

        #footer {
            line-height: 60px;
            margin: 0 auto;
            width: 940px;
            text-align: center;
        }  

HTML Part

<!DOCTYPE html>
<html>
<head>
    <title>Sticky Header and Footer</title>
    <style type="text/css">
    
    </style>
</head>
<body>
    <!-- BEGIN: Sticky Header -->
    <div id="header_container">
        <div id="header">
            Header Content
        </div>
    </div>
    <!-- END: Sticky Header -->
    <!-- BEGIN: Page Content -->
    <div id="container">
        <div id="content">
            ...
            body content 
            ...
        </div>
    </div>
    <!-- END: Page Content -->
    <!-- BEGIN: Sticky Footer -->
    <div id="footer_container">
        <div id="footer">
            Footer Content
        </div>
    </div>
    <!-- END: Sticky Footer -->
</body>
</html>