CODEWITHSUNDEEP
cssheight
Crays
Crays

Reputation: 2508

CSS 100% height with sidebar and content (divs within)

I've asked this question before and got a solution but as I work my way into it, I found out that the solution wasn't the best (the suggestion was to set both into display:table-cell)

As I add in divs within, the height changes and the layout gets out of hand.

what I want is really simple, something like the image shown

[EDIT : this is the main reason why i'm having problem, i'm trying to add a div to include a shadow ] enter image description here

I want the textured BG to stretch all the way, as tall as how the page would be (so as the content varies the textured bg would follow)

So I made something such as

<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>

by setting all the divs and body style to have height:100%; but the problem is that as my content stretches beyond the page limits (a scroll bar appears) the textured BG doesn't flow over, it just stop at where it was. Say the screen is of 800px tall, if the content goes beyond and reaches 1000px, the textured bg stops at 800px.

As I tried what was recommended for me by using display:table-cell, the textured bg flows with the content, but I can't add in my side bar because when I do, there will be a blank space above the content div. Any suggestion on how I should handle this problem?

Upvotes: 0

Views: 814

Answers (3)

Marius
Marius

Reputation: 961

EDIT: Using Xun Yang's approach would work. It's just, as he put it himself, unconventional ;)

The fiddle: http://jsfiddle.net/Nu2wH/

html, body {
    height: 100%:
    padding: 0;
    margin: 0;  
}

#page {
    background: #444444;
    min-height: 100%; 
    height:auto !important; 
    height:100%;
    overflow: hidden !important;
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}

#sidecolumn  {
    width: 45%;
    padding-left: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    float: left;
}   

#sidebar {
    background: #ddd;
}
#maincolumn  {
    padding: 5%;
    width: 40%;
    float: right;
    background: #AA9933;
    height: 100%:
}    
#content {
    background: #ddd;
}

​

Upvotes: 1

Xun Yang
Xun Yang

Reputation: 4419

#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}

Not very conventional but works :)

Upvotes: 0

Breezer
Breezer

Reputation: 10490

You Can Use the css 3 declaration background-size, for all browsers

background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;

Upvotes: 0

Related Questions