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.

Advertisements

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