Column BG image won't extend to 100% height - html

Question

I have a left column with a background image and another background image for the body so it fills the rest of the screen. I have content area to the right of the left column that will extend vertically past the browser window. With the left column set to 100% height, once I scroll down the background image for the left column will not extend past the original size of the screen. Is there a pure css way to have the left column extend past the original height of the browser window, to match the content area?
http://ophilium.com/test/test.html
html {
height: 100%;
}
body {
height: 100%;
background-image: url(../images/rightPanel.png);
background-repeat: repeat;
height: 100%;
}
#left {
background-repeat: repeat-y;
width: 207px;
padding: 10px;
float: left;
height: 100%;
background-image: url(../images/leftPanel.png);
}
#right {
height: 500px;
padding: 10px;
min-width: 773px;
float: left;
}
#container {
position: relative;
min-width: 1100px;
height: 100%;
background-repeat: repeat;
}

Answer 1

Add the rule background-attachment: fixed; to your body element.

Answer 2

please check demo http://jsfiddle.net/n9Tcv/
var right_height = jQuery('#right').height();
var left_height = jQuery('#left').height();
jQuery('#left').height(right_height);​
you know how to use jQuery? if you have any doubt just reply me, i do this code like this situation

Answer 3

If I understand your question correctly you need to use the equal height columns technique. Googling for a solution brought me here and here. There you may find different ways to make the sidebar to be equal to the main content area. Simply choose the best one :)

Answer 4

When you set html and body tag height to 100%, they both set their height to inner height of the browser window which means they both have the same value and also a fixed value. And since your divs, #container and #left, are childs of and relative to body element, they set their 100% height accordingly, i.e to inner height.
Moreover, if you need an answer for the question: Then why does the div #right extend?, it is because it does not extend but overflows. And since you don't tell the body or #container or #right to set the overflow property to hidden, none of them prevents such kind of browser behavior. And in this case you assume the original window height is the height which overflow causes.