I am facing an issue with my website layout where the left column has a background image and another background image is set for the body to fill the rest of the screen. The content area on the right extends vertically beyond the browser window height. However, when I scroll down, the background image of the left column does not extend past the original size of the screen. Is there a CSS-only solution to make the left column match the height of the content area?
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;
}