How to make a div tag span the height of the page

Question

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.

http://jsfiddle.net/dHerb/

I can set the .center 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.

Any pointer will be much appreciated.

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.

Answer 1

Put everything inside of a container div. So, for example:

<div id="container" style="width:960px;">
    <div id="content" style="width:800px; height:100%; float:left;">
            Your Content
    </div>
    <div id="sidebar" style="width:160px; height:100%; float:left;">
            Your sidebar
    </div>
</div>

Note: I used inline style elements here for clarity in the sample code, place them in your external style sheet.

This will cause the content and the sidebar to always match the full height of the page. If you need to, you can manually set the height of the container div and everything should size automatically.

I believe this is what you were asking, please let me know if I went down the wrong path!

Answer 2

I would recommend using the following CSS:

.overlay {
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: rgba(0,0,0,0.3);
}

The HTML part would be:

<div class="overlay">
    Add some content over here if you want to display something like a popup
</div>

I used the above code to display an overlay with a popup in it. Why I did not use height : 100% is because after using that, the overlay was not showing in a specific case where the height of parent div was not specified. Refer to this question.