#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    9
    Rep Power
    0

    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!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Why wouldn't the vertically repeating background work here? What prevents you from removing the image for the narrow viewport widths?

    Here's a similar layout that uses a different equal height columns technique.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    9
    Rep Power
    0
    Thanks for the link! That's just what I want it to do.

IMN logo majestic logo threadwatch logo seochat tools logo