CSS3/HTML5 Sticky Header/Footer With Side Nav and Content Area

Question

I am trying to implement a web layout using CSS3 where the header and footer are sticky. There is also a left side nav frame that extends from the header to the bottom of the browser page. The side nav frame is scrollable once the content extends beyond the bottom of the page. Finally, there is a right content frame that extends from the header to the footer. The content frame is also scrollable once the content extends beyond the footer.

I have searched through this site along with other and I cannot seem to find exactly what I am looking for. Has anyone implemented such a layout or point me in the right direction.

Thanks.

Answer 1

Here is a layout where the header and footer are sticky, hope this get you in the right direction.

$(document).ready(function () {
    // Get sizes
    var docHeight = $( document ).height();
    var docWidth = $( document ).width();
    var headerHeight = $('.header').height();
    var footerHeight = $('.footer').height();
    var contentHeight = $('.content').height();
    var sidebarHeight = docHeight-headerHeight-footerHeight;
    var sidebarWidth = $('.sidebar').width();
    
 
     // Set sidebar height
    if(contentHeight < sidebarHeight) {
         $('.sidebar').height(sidebarHeight);    
    } else {
         $('.sidebar').height(contentHeight); 
    }

    // set content width
    $('.content').width(docWidth - sidebarWidth);
    

    
})

* {
 margin: 0;
}
html, body {
 height: 100%;
}

#container {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
 height: 100px; 
}

.footer {
    background-color: pink;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.header {
    background-color: red;
    position: fixed;
    width: 100%;
    height: 100px;
}

#content-wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
}

.sidebar { 
    width: 200px;
    background-color: blue;
    float: left;
    padding-bottom: 100px;
}

.content {
    float: left;
    padding-bottom: 100px;
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="header">Header</div>
    
    <div id="content-wrapper">
        <div class="sidebar"> Sidebar </div>
        <div class="content">
            
            Hello World <br/>
            <img src="http://placehold.it/500x500" /><br/>
             Hello World <br/>                                         
        </div>
    </div>
    
    <div class="push"></div>
    
</div>
<div class="footer">footer</div>

See fiddle for how it works http://jsfiddle.net/z4sL8upt/3/

Answer 2

Welcome to SO!

The basic idea: You can get that header and footer positioning with position:absolute or position:fixed (and top:0 and bottom:0 respectively), and get the main content working with positioning, margins, and maybe a wrapping div. It would be overkill, but you could google "fait sticky footer" for the footer. It would be serious overkill, but you could google "portamento js" for the header.

This is a very broad question that has a sort of "how do I develop my site" feel. You may get some flack for it (like the downvote you received immediately - I've upvoted that back to zero to not penalize you for being new here -edit: someone beat me to it-), and that's why I'm giving a broad answer. I've included the overkill answers because that might just be the quickest way for you even if it's not really the best way to learn and understand html/css