Scrollable div with Variable Height

Question

I want my sidebar to have a scrollable div. But it cant have a fixed height. How can I make it scrollable without setting a fixed height?

I tried with this, doesn't work properly.

.sidebar {width:300px; padding:10px; background:#efefef;height:100%; position:fixed}
.scroll-widget {overflow-y: scroll;padding:10px;margin:10px; background:#fffeee; height:inherit}

-

<div class=sidebar>
 ...
    <div class=scroll-widget>
      ...
    </div>
</div>

Demo : http://jsfiddle.net/YK47P

Jquery alternative is also fine with me. But i am a beginner, so please be kind

Answer 1

Somehow I was able to make it work using jQuery and taking help from here .

    $(function () { // window load
        $(window).resize(function () {
            var sidebarH = $('.sidebar').height();
            var scrollH = $('.top').height();
            $('.scroll-widget').height(sidebarH - scrollH);
        }).resize();
    });

DEMO : http://jsfiddle.net/YK47P/40/

Answer 2

You just need to add overflow: scroll to your sidebar:

.sidebar {
    width:300px;
    padding:10px;
    background:#efefef;
    height:100%;
    position:fixed;
    overflow: scroll;
}

Updated Fiddle