Прокручиваемый div с переменной высотой

Question

Я хочу, чтобы у моей боковой панели был прокручиваемый div. Но он не может иметь фиксированную высоту. Как я могу сделать прокрутку без установки фиксированной высоты?

Я попытался с этим, не работает должным образом.

.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 альтернатива тоже хорошо со мной. Но я новичок, поэтому, пожалуйста, будьте добры

Answer 1

Как-то я был в состоянии сделать его работу с помощью JQuery и принимая помощь от 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

Вам просто нужно добавить overflow: scroll на боковой панели:

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

Updated Fiddle