Question

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>
    </ul>

    </div>
</div>

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;
    }

Answer 1

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">
      </ul>
    <div>
  </div>
</div>