CSS Fill 100% of height. Different Browser Sizes

I have a sidebar(blue) which is set to float left. I've set the height to 100% and body and html height set to 100%. It works fine:

The problem is when the browser is smaller than the content pane div (red), the height of the sidebar becomes the same height as the browser. So if i scroll down, the side bar is shorter than the page:

The body adjusts itself though, its height covers the content pane. But I guess the height of the sidebar is the height of the window because, it's set to 100% of the body which is set to 100% of the html which is set to 100% of the window. I can take out 100% height for the body and html but that means I can't set the height of the side bar, which will make it as short as possible.

I'm really stumped here. Any help would be appreciated

html:

<html>
<body>
<div id='menubar'>ignore this for now</div>
<div id='sidebar'>a few elements<div>
<div id='contentPane'>lots of elements</div>
</body>
</html>

css:

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

#sidebar{
    float:left;
    height:100%;
}

SOLUTION

Hashem Qolami solved this by wrapping the divs and using absolute positioning for the side pane

html:

<body>
<div class="wrapper">
    <div id='menubar'>note the height of this element</div>
    <div id='sidebar'>a few elements</div>
    <div id='contentPane'>a lot of elements</div>
</div>
</body>

css:

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

.wrapper {
    min-height: 100%;
    position: relative;
    background-color: gold;
}

#menubar {
    height: 30px;
    background-color: darkcyan;
}

#sidebar{
    position: absolute;
    left: 0;
    top: 30px;   /*HEIGHT OF THE MENU BAR*/
    bottom: 0;
    width: 200px;
    background-color: orange;
}

#contentPane {
    margin-left: 200px;
}

jsfiddle.net/hashem/J4WW9

The best way I manage to do this is by creating a div that surrounds both sideBar and contentPane.

Here's a pen to demonstrate!