javascript - CSS to span column height to window height? -

javascript - CSS to span column height to window height? -

i want create left , right column span window height , give user scrollbar independently scroll 2 columns. how can this?

i've been trying min-height: 100% , height: 100% doesn't seem work no matter utilize it.

i setup jsfiddle here: http://jsfiddle.net/legend/t5cua/1/

edit: don't want add together position: fixed. still want columns align if user reduces width of browser window.

you need create sure previous wrappers set height: 100% , overflow: hidden. this fiddle shows (may need tweaks depending on want):

html, body, .container-fluid, .container-fluid > .row-fluid { height: 100%; overflow: hidden; } .span-fixed-sidebar { height: 100%; overflow: auto; } update clarification

you need go on process deeper. point need set scroll on actual column element(s) want scroll, , have else explicitly set height: 100% , overflow: hidden wrap column. probably you:

html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar { height: 100%; overflow: hidden; } .span-fixed-sidebar > div { height: 100%; overflow-x: hidden; overflow-y: auto; }

javascript css css3 twitter-bootstrap