So, I'm working on a redesign, and I ran into a little problem. I have a sidebar that has a repeating background. This background is supposed to run down the entire page length. And, I thought it did. Now, I realized if the content is longer than my sidebar, the background gets cut off. Not only that, but on higher resolutions, the background also gets cut off. I usually don't have a CSS problem, but I'm stumped.
Basically, this is what I have:
I think you need to add overflow:auto. Your issue sounds like one I had a little while ago, and that's what I did. If it doesn't work, then it's not the same thing.
^That (I always thought if you had a set height you had to set some kind of overflow for it to work?) I really haven't brushed up on CSS like I should.
height: 100% just means that the height of the element will be the same as the height of the containing element, which may or may not be equal to or longer than the height of the entire screen. It might be easier to give a link to the page in question, or at least the entire source code, since the answer may rely on other elements on your page.
div#sidebar {
background: url('images/sidebar.png') repeat-y top left;
width: 280px;
height: auto;
padding-bottom: whatever;
}
^ I see, but unfortunately, my sidebar isn't within another container. It's in the body section, instead of a DIV. And the way I have my markup displayed, I can't just seem to get it within my main DIV.
I bet I could use Javascript to get the height of the main DIV (or body, for that matter) and append it to the CSS of the sidebar DIV. But, that would be a hassle.
Can you post the code, please?
In its most basic form (I don't want to bore you with any other unnecessary codes and I assure you, there really is nothing else affecting the sidebar), here's the CSS and HTML.
CSS:
Nope, didn't work either. Anyway, I have to use a strict DOCTYPE because I'm using Cufon for rendering a font and the line-height was a bitch. So, according to their API, line-height wouldn't work without a strict DOCTYPE. Oh well.
Anyway, I kind of just gave up on this. I threw in a little jQuery to fix it.