Bootstrap - Extend side navigation to bottom of page. Height 100%


Been trying for days now to extend my side navigation to the bottom of the page, I've Google'd and looked everywhere. People continue to say to have height 100% on your HTML and body and to have a container div around the navigation with min-height: 100%, however none of this works.

Starting to think this isn't possible in Twitter Bootstrap due to it being floated.

I can't really use position absolute or anything because I need this to remain fully responsive. I have a side navigation in a span 2 with my content on the right in a span10.

Code for the navigation:

<div class="span2">                
    <div class="span10 shadow-right fill" style="background-color: #860038; min-height: 100%;     overflow: hidden;">

    <ul class="side-nav">
      <a href="dashboard/index"><li class="side-box-active">My   Dashboard</li></a>
      <a href="dashboard/control_panel"><li class="side-box">Control Panel</li></a>
      <a href="dashboard/support"><li class="side-box">Support</li></a>


And my CSS:

html, body {
    height: 100%;

.fill { 
    min-height: 100%;
    height: 100%;
    .side-nav {
      list-style: none;
      margin: 0 !important;

    .side-nav li {
      margin-top: 20px;
      padding-top: 16px;
      margin-bottom: 20px;
      padding-left: 16px;
      cursor: pointer;
      color: #860038;

    .side-nav li a{
      font-size: 15px;
Problem courtesy of: user1696090


Looks like you're missing the fill class on your <div class="span2> which is the parent container of your nav. So it should be <div class="span2 fill">. Also, I'm assuming you're spans are nested within a row and container as well which will also need to be told to extend 100%; should look something like this:

<div class="container fill">
  <div class="row fill">
    <div class"span2 fill">
      <ul class="side-nav fill">
Solution courtesy of: sellmeadog


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.