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.

can you draw a simple wire frame sketch. the one thing you need to do a research on is [css display] and [css position]; span have display:inline where as div has display:block, with position you make a relative to container element. please send some picture, — Pramendra Gupta, Aug 10 '11 at 01:15
This has nothing to do with `span` tags. Did you look at the jsFiddle? Did I explain everything that I need to? — Tyler Crompton, Aug 10 '11 at 01:20

score 4 · Accepted Answer · answered Aug 10 '11 at 01:48

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!

In this example, the height of `#container` depends on the greater of the heights of `#content` and `#sidebar` since I have to absolutely position the `#container`. — Tyler Crompton, Aug 10 '11 at 04:39

score 3 · Answer 2 · answered Aug 13 '19 at 09:57

3

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.

answered Aug 13 '19 at 09:57

Dude

199
2
6

That definitely works, but I don't think that the `vh` unit didn't exist at the time that I posted the question. Thank you for sharing a more modern solution. – Tyler Crompton Aug 16 '19 at 14:07
Thank you for upvoting the answer. :) – Dude Aug 16 '19 at 17:19

score 1 · Answer 3 · answered May 05 '14 at 19:34

1

If you can't use flexbox you can set the container's display to inline. See http://codepen.io/tommymarshall/pen/cECyH for demo.

answered May 05 '14 at 19:34

tommymarshall

21
4

score 1 · Answer 4 · answered Aug 10 '11 at 01:25

This is a problem that CSS 2 is not equipped to handle, sadly. The standard solution people use is to make the background of the sidebar a background image on the container, but that's not really very elegant.

The only clean solution comes in the form of the magical flexbox. Here's how to use it:

http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/

You can find many other tutorials via The Googles.

score 1 · Answer 5 · answered Aug 10 '11 at 02:09

This might be close to what you want.

I used display:inline-block;

HTML

<div id="stretched">I span from the left viewport to the right viewport.</div>

<div id="main" class="center">

    <div id="left">Some text</div>

    <div id="right">I want to be on the right side of the centered content but as tall as the taller between the body tag and the viewport.</div>


</div>

CSS

body {
    padding: 0;
}
#stretched {
    background-color: #ddd;
    width: 100%;
}
.center {
    margin: 0 auto;
    width: 300px;
    height:800px;
}
#main {
    background-color: #bbb;
}
#right {
    background-color: #999;
    width: 100px;
    display:inline-block;
    height:100%;
}
#left {
    width: 195px;
    display:inline-block;
    height:100%;
    vertical-align:top;
}

Example: http://jsfiddle.net/jasongennaro/dHerb/3/

I though about doing that but the only thing is that the stylesheet is site-wide so the length of the content in the #left and #right elements is unknown. Plus, what happens if the available height is greater than 800px? It still won't fill the viewport. — Tyler Crompton, Aug 10 '11 at 04:33

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

5 Answers5