可變高度的可滾動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> 

演示：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