Bootstrap with sticky header, footer, & affixed sidebar

by panchroma

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div id="wrap"><!-- Wrap for sticky footer -->
    
    <!-- Navbar -->
    <div class="navbar navbar-fixed-top"> 
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="brand" href="#">Bootstrap jsFiddle</a>
            </div>
        </div>
    </div>
    <!-- /Navbar -->

    
    <!-- Main content -->
    <div class="container-fluid"> 
        <div class="row-fluid">
            
            <div data-spy="affix" data-offset-top="0">
            <div id="sidebar" class="span3">
                <h4>Sidebar</h4>
                <p>This sidebar should be span3 width at all times with the span9 appearing to it's right with proper margin between them. It should not flicker it's width when the user is scrolling. It should be this way regardless of browser window's horizontal width. It would be doing it right now if it were not for the affix that has been applied to it. The sidebar needs to be affixed so that only the main content scrolls. When the browser width is narrow it should not rest on top of the span9 but rather it should stack above it. And of course the sidebar should never appear overlapping the sticky footer below. But if you play with the window sizes both horizontally and vertically you will see some very strange behaviour.</p>
            </div><!-- /Sidebar -->
            </div><!-- /Affix -->
            
            <div id="content" class="span9">
                <p>
                    Span 9 filled with Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa...

CSS

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css');

/* Sticky footer styles
-------------------------------------------------- */
body {
  height: 100%;
  padding:0;margin:0;
}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
}
#push, #footer {
  height: 60px;
}




/* Mobile width friendly padding for top
-------------------------------------------------- */
@media (min-width: 640px) {
    body {
      padding-top: 0px;
    }
  }















/* Coloring */
.span3 {background-color: rgba(229, 229, 229, 0.85);}
.span9 {background-color: rgba(229, 229, 229, 0.30);}
#footer {background-color: #454545;}

JavaScript

$('#sidebar').affix()