March 1st, 2013, 05:42 PM
How to make sidebar background fill the height of the page... responsively
I'm just learning to create responsive websites, and I have a problem I'm not sure how to solve.
In the past, when I'd design a fixed width site, if I had a two-column layout and I wanted the sidebar to have a background color that extended all the way to the bottom of the page, regardless of how much content was in either column, I would wrap both column divs in a parent div that had a vertically repeating background as wide as the sidebar. Worked great.
The fluid, responsive site I'm working on now has two columns in desktop view, but when it shrinks down to tablet/phone size, I want everything in the sidebar to appear at the end of the rest of the content. I've got that part working, but in desktop view, the background color on the sidebar does not extend all the way to the bottom of the page like I want it to. The code for the sidebar (an aside tag) exists just after the main content, so it gets parsed in chronological order when in tablet/phone view. In desktop view, I have it set to be absolutely positioned as a 200px wide column on the left.
Any idea how I can get the background color to fill the entire height of the parent element? Even if I could get it to work the old way, the repeating background pattern would not resize when you shrink the browser window.
Here is the site in question. Thanks for any help!
March 1st, 2013, 10:23 PM
March 2nd, 2013, 10:09 AM
Thanks for the link! That's just what I want it to do.