Making a full height side Nav

Question

I am trying to put a navbar on the left which looks like this.

To do that I made all of the elements(html, body) 100%. Then I structured it like this

HTML:

<div class="span2 leftmenu">
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li class="ender"><a></a></li>
  </ul>
</div>

CSS:

.leftmenu {
  margin-left: 0px;
  height: 100%;
}

.nav-tabs.nav-stacked {
  border-bottom: 0;
  height: 100%;
}

.ender {
  height: 100%;
}

.ender a {
  height: 100%;
}

The issue I'm having is that the navbar always goes past the bottom of the screen. I want to try and make it stretch jut to wherever the page ends. If I do it at 100% it goes past, and even if i make it something like 60% and it doesn't go to the end it still scrolls past the page. Has anyone made a good working side navbar setup that works with a top navbar as well or does anyone know what I can do to fix what i have?

Answer 1

I think you should show more html and css so that we can see more clearly what the issue is. However, height 100% doesn't take into account the border and padding of the parent elements. Try zero-ing these out for the body, and any other ascendant element of your navbar:

body {
    margin: 0; padding: 0; border: 0;
}

There are other approaches though, such as enclosing your main content and the navbar in a wrapper element - make the wrapper stretch to the full height, give the navbar a transparent background so that the background of the wrapper-element shows through; or look-into faux-columns. alistapart

Answer 2

You should remove the height set on .ender and .endar a. They are forcing the height of your navbar to be greater than the window height. If you need .ender for a styling reason (e.g. it is containing some kind of background) then I would position it absolutely within the navbar, and not within the list.

So, remove:

.ender {
height: 100%;
}

.ender a {
height: 100%;
}

I would also remove the margin automatically set on the body tag.

Here is the code: JSfiddle

Answer 3

You might find this article interesting:

http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

In order for a div to be 100%, it's parents also need to be 100% in height.

Therefore, the other examples of

html, body, span2 {
   height:100%;
}

are correct.

Answer 4

it's hard to tell exactly what the problem is without more information, but it seems like removing height:100% from all the elements you've listed except for .leftmenu, adding 100% to the html and body, and applying a reset would work.

ie:

* {
margin: 0;
padding:0;
}

html, body {
height: 100%;
}

.leftmenu {
height: 100%;
}

Answer 5

Is this you are looking for..?

html, body {
  margin:0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.leftmenu {
  width: 40%;
  margin-left: 0px;
  height: 100%;
  background: #f9f9f9;
  float: left;
}

.nav-tabs.nav-stacked {
  border-bottom: 0;
  height: 100%;
}

.ender {
  height: 100%;
}

.ender a {
  height: 100%;
}

.right-side {
  float: left;
  height: 100%;
  width: 60%;
}

<div class="span2 leftmenu">
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li class="ender"><a></a></li>
  </ul>
</div>
<div class="right-side">
  right content
</div>