Calculate and Use Dynamic Height for SlimScroll

Question

Jsfiddle Demo

I have a sidebar with 100% height. I have a top widget and a bottom widget. I want to make the bottom widget scrollable, with slimscroll.

.sidebar {width:300px; padding:10px; background:#efefef;height:100%; position:fixed}
.top-widget {background:#eeefff;padding:10px}
.scroll-widget {overflow-y: scroll;padding:10px;margin:10px; background:#fffeee; height:300px}

The problem is slimscroll or any similar scroll plugin we have to make the container of fixed height.

Anyway I can assign a height dynamically to .scroll-widget before slimscroll is called so that it works ?

Answer 1

You can get element's height by calling

$('#element').height();

or

$('#element').outerHeight();

The difference between height and outerheight is; height only gets element's inline height without padding and margins. Outerheight calculates based on element's: height, padding, margin and border.

Call these after window loads.

Edit: For calculating margin too, have to give boolean to

outerHeight(true);