html5 - CSS -- two columns, one static, the other scrollable and maxed out to the first's height -


i've had trouble finding resources on how this. (this , this didn't seem work in case). want 2 columns, side side, of equal height -- determined right column's height.

both of heights should variable, , if contents of left taller of right, left column should scrollable.

i've tried making left column absolutely positioned, overflows container, if overflow set scroll. i'd set max-height, want max height dynamically set right column.

any ideas how this?

default styles work right column.

for left one:

.left-column {     overflow-x: hidden;     overflow-y: auto; } 

and need little jquery snippet make work:

$(document).ready(function() {     var desiredheight = $('.right-column').height();     $('.left-column').css('max-height',desiredheight);     $('.left-column').css('min-height',desiredheight); }); 

it works fine when page loads. if content change after page loaded, have bind code above event (which changes content).

hope helps you.


Comments

Popular posts from this blog

java - How to Configure JAXRS and Spring With Annotations -

visual studio - TFS will not accept changes I've made to a Java project -

php - Create image in codeigniter on the fly -