title: How to make a div tag span the height of the page
body: <p>I don't know how to ask this so pardon me if I am unclear and please ask me to clarify. I want to center a page and have a "side bar" on the right within the centered content, not the right of the viewport. This is pretty simple except I want the element to be as tall as the viewport. However, if the body tag is taller, I want it to be as tall as the body tag. I need this because the sidebar has a background that must repeat along the y-axis to cover the entire viewport. I probably didn't explain anything so perhaps this jsFiddle will clear up any missed details.</p>
  
  <p><a href="http://jsfiddle.net/dHerb/" rel="noreferrer">http://jsfiddle.net/dHerb/</a></p>
  
  <p>I can set the <code>.center</code> style to have a position value of static which works but then the absolute positioning is thrown off. I could float the sidebar to the right but the height won't fill the page. I could use JavaScript, but JavaScript shouldn't be relied on for layout especially since the element that depends on it is a quarter of the page's content.</p>
  
  <p>Any pointer will be much appreciated.</p>
  
  <p>EDIT: Changing the body and html tag to have a height of 100% helps but it still doesn't quite behave as I described. If there is content out of the viewport and you scroll to that content, the background won't repeat.</p>