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

具有可变高度的可滚动div

2 个答案: