javascript - CSS column devilry: a sticky div with an auto-stretching div in between it? -

i should start saying have researched question. can't find identical questions or ones i'm after.

i'd able put content @ bottom left of page, , have div above automatically stretches use space between top of page , content @ bottom left, when user resizes window.

please see image below.

i position bottom-left content position: absolute; bottom: 10px;, works. ideally have div above automatically stretch fill big gap (i.e.):

[stretchy_div_height] = [100%] - [height_of_bottom_div] - [bottom_div_margin].

ideally without javascript if possible. either way fine. can't use faux columns height-stretching div (i need real content way down).

thank you!

here image of i'm aiming achieve:

see: http://jsfiddle.net/zsels/

css:

html, body {     margin: 0;     padding: 0 } #left {     position: absolute;     left: 10px;     top: 10px;     bottom: 60px;     width: 120px;     background: #ccc } #leftbutton {     position: absolute;     left: 10px;     bottom: 10px;     height: 40px;     width: 120px;     background: #f0f }  #content {     margin: 10px 10px 10px 140px;     background: #999 } 

html:

<div id="left"></div> <div id="leftbutton"></div>  <div id="content">     content<br />     .. </div>