高度可變的可滾動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並從這里獲得幫助。

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

演示 ： http : //jsfiddle.net/YK47P/40/

Answer 2

您只需要添加overflow: scroll到側邊欄：

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

更新小提琴