Height of div element not matching parent's height when 100%

Question

I am trying to make a bootstrap layout with two panels with a navbar and a sticky footer.

I want my sidebar to have a background color that goes all the way down. But when my right panel has more content, my left panel's background color does not go all the way to the bottom. I have my navbar and container placed inside a div tag and the container contains the right and left panel. I want the right and left panel to scroll together and do not want them to have their separate scroll bars. My code looks like this:

body, html, .row-offcanvas {
    height: 100%;
    overflow: auto;
}
body {
    padding-top: 50px;
}
#sidebar {
    height: 100%;
    min-width: 290px;
    max-width: 220px;
    background-color: #f5f5f5;
    float: left;
    position: relative;
}
#main {
    overflow-x: auto;
}

Link to jsfiddle: http://jsfiddle.net/amirshadaab/ouqda63m/

When m sidebar has a height of 100%, it does not take the height of the parent container but stops in the middle and when I get rid of the height: 100% from sidebar, my background for the side panel is only going till the content ends and not all the way down. Am I doing something wrong here?

Answer 1

It works as supposed to, since your wrapper row-offcanvas is 100% in height and scrollable . Sidebar takes the same height, but is not scrollable. That's why it "ends" before you reach it's end.

Remove height: 100% and it works.