滚动左栏，剩余屏幕高度为100％，滚动问题

Question

I'm trying to create a scrollable left column that takes up 100% of the remaining space, minus the distance from the top of the page. It works well currently, but there's a few issues. When I initially created it, I ran into an infinite scrolling issue because I wasn't taking into account the footer height:

http://jsfiddle.net/sUqtD/5/

If I subtract the height of the footer:

http://jsfiddle.net/sUqtD/4/

it works to an extent, but if I resize the browser height, and the right column height pushes the footer down, the left column height still takes into account the footer height.

So my question, how can I get the left column to take up 100% remaining height in all conditions?

Answer 1

Try something like that: http://jsfiddle.net/mXjLE/1/

Its not code perfect, but it works (I things).

Answer 2

You only had some minor errors. The example you made where you subtracted the footer was close but you stil need to configurate your CSS as well..

Take a look at the code I made.. It works and takes the footer into account even if you decide to change it.. ( it is only a minor rewrite of your code.)

Hope it helps http://jsfiddle.net/sUqtD/20/

EDIT There is a error when the window size is smaller than the left column - but I'll solve this asap :)