height of 100% not working on side navigation - css

Question

For the life of me I cannot get my side navigation to expand to the bottom of my page. I've googled this and looked at many other stack overflow questions related to this but nothing is helping.
People have suggested setting a height on the parent div, since height: 100%; doesn't know what the 100% is. But how does the parents height know what 100% is?
I also cannot use any "fixed" or "absolute" positioning because that seems to completely break the responsiveness of Twitter Bootstrap.
Here is my code:
<div id="secondary">
<div class="span10" style="background-color: #860038; min-height: 100%; overflow: hidden;">
<ul class="side-nav">
<?php if (!empty($secondary_menu)): ?>
<?php foreach ($secondary_menu as $key => $menu): ?>
<?php $active = ($this->uri->segment(2,'index') == $key)? 'side-box-active': 'side-box'; ?>
<li class="<?= $active ?>"><?= $menu['label']?></li>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
So the above code creates my side navigation dynamically throughout my application. I'm using Twitter Bootstrap and on the div class="span10" I put my background-color for the side nav and min-height: 100%. (Also overflow:hidden).
What this is currently doing is creating my container but it cuts off right when the navigation stops, rather then expanding to the bottom of the page.
As you can see, I setup a parent div with ID="secondary", in case we need it.
Screenshot shows the side navigation. I need the maroon red color to expand to the bottom of my screen. Scratch that it lets you post pictures then explain them and then tells you you can't post pictures :) sorry no image I guess.
Thanks for any help in advance.

Answer 1

In order for 100% height to work, parent elements need 100% height as well, including html and body.

Answer 2

Not sure if you've solved the problem, but if someone doesn't:
When you have a background image or color that you want to repeat all the way down the page, but within that page you have columns of different lengths, the only way to accomplish this is to put the background image or color in the container which will then hold the different lengths of column.
Said columns will expand down according to the amount of content you put within them. The longest div inside the container will make the background image repeat-y (down) or the color.
So your structure would look like this:
<div id="container"> <!--which is the #1 element in your body-->
<div id="leftcolumn"> Your side-nav would go here</div>
<div id="rightcolumn">Your main content which is usually longer
than the menu will go here</div>
</div><!-- end container-->
Obviously in this situation your header and footer div would be placed outside the container div and may need to go within another wrapper div to keep everything centered.
And with, for example, the following CSS, it'll work just fine:
<style>
html,
body {
height:100%;
background-color : #103C52; /* or whatever you like*/
}
#container {
height:100%;
background-color: green; /* or whatever you like*/
}
#leftcolumn {
height:100%;
width: 16.67%; /* or whatever you like*/
background-color: red; /* or whatever you like*/
float: left;
}
#rightcolumn {
height:100%;
width: 80%; /* or whatever you like*/
overflow-x: hidden; /* or whatever you like*/
overflow-y: scroll; /* or whatever you like*/
background-color: blue; /* or whatever you like*/
float: left;
}
</style>
If this is not clear, post what you have so far and I will take a look at it... ;)