Stretch height of content-div so vertical-navi gets stretched as well - html

Question

i have this fiddle: http://jsfiddle.net/z715whdj/1/ don't know what you need from css so please take a look at the fiddle.
<div class="container">
<div class="head">
<!-- Slogen and meta-links -->
</div>
<div class="carousel">
<!-- Maybe some headpics or a slider -->
</div>
<div class="logo">
<!-- Main Logo -->
</div>
<div class="navi">
<div class="logos">
<ul>
<li></li>
<li></li>
<!-- Placeholder for some logos -->
</ul>
<div class="clr"></div>
</div>
<div class="nav">
<!-- Navi UL -->
</div>
</div>
<div class="content">
<!-- Content comes here -->
</div>
<div class="footer">
<!-- Footer -->
</div>
</div>
the left blue bar should be the navi and it should be as high as the content+footer is (overlapping over footer). How can i get that?
I got the min-height aspect but it seems to be struggling because i get a scrollbar. i read through some of the questions here but i wasn't able to get some aspects of them.
is there a possibility to stretch the height of the navi in function of the content+footer or do i have to write a workaround and if i have to, how to write this workaround?

Answer 1

Try to set position:relative to container and position:absolute for navi. Set top property to compensate header height, and bottom to 0 to let navi fullfill container height.
CSS:
.container {
width: 970px;
padding-right: 3px;
padding-left: 3px;
background-color: #fff;
margin: auto;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.65);
z-index: 1;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #575756;
min-height: 100%;
height: 100%;
position:relative;
}
.container .navi {
float: left;
margin-left: 30px;
z-index: 3;
background-color: #233872;
padding: 20px 10px 20px 10px;
border: 3px solid #fff;
border-bottom: 0;
position: relative;
width: 220px;
position:absolute;
top:50px;
bottom:0px;
}
jsFiddle
EDIT:
As requested, I've created a new (simpler) layout to let container fullfill 100% height without vertical scrollbar: jsFiddle