Geek Answers Handbook

How to make div span tag page height

I do not know how to ask about this, forgive me if I am unclear and please ask me to clarify. I want to center the page and have a “sidebar” to the right inside the centralized content, and not to the right of the viewport. This is pretty simple, except that the item should be as tall as the viewport. However, if the body tag is higher, 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 maybe this jsFiddle will clarify any missing details.

http://jsfiddle.net/dHerb/

I can set the style .centerto have a static position value that works, but then absolute positioning is canceled. I could turn the sidebar to the right, but the height will not fill the page. I could use JavaScript, but JavaScript should not rely on layout because the element that depends on it makes up a quarter of the contents of the page.

Any pointer would be greatly appreciated.

EDIT: changing the body and html tag to 100% height helps, but it still doesn't quite behave as I described. If there is content from the viewport and you scroll to it before, the background will not be repeated.

+5
source share
5 answers

Put the entire contents of the div container. 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>

. , .

, . , div, .

, , , , , !

+5

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);
}

HTML- :

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

. height: 100%, , div . .

+2

, .

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/

+1
source

If you cannot use flexbox, you can configure the display of the container on inline. See http://codepen.io/tommymarshall/pen/cECyH for a demonstration.

+1
source

More articles:


All Articles