CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Debajyoti Das
Debajyoti Das

Reputation: 2138

Scrollable div with Variable Height

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

Upvotes: 1

Views: 117

Answers (2)

Debajyoti Das
Debajyoti Das

Reputation: 2138

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/

Upvotes: 1

Felix
Felix

Reputation: 38102

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

Upvotes: 0

Related Questions