CODEWITHSUNDEEP
cssheight
Crays
Crays

Reputation: 2508

CSS 100% height with a sidebar

i'm having a problem with 100% height for CSS. I've searched for numerous tutorial as well as solutions but i can't seem to get the results i want. What i have is a sidebar and a main column where the content will be placed.

As the main column stretches due to the content i want the background of the sidebar to stretch as well. But what i get is that the sidebar's background kept getting stuck at a point and it does not goes all the way down.

enter image description here

The black background is my side bar and the content seem to keep overflow to the side.

My codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>CSS 100% Height</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>

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

</div>
</body>
</html>

css

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#content {
    background: #EEE;
    font: 1.5em arial, verdana, sans-serif;
    min-height: 100%;
}

#sidecolumn {
    width: 500px;
    height: 100%;
    background: #000;
    float: left;
    }

#maincolumn {
    height: 100%;
    }

#page {
    height: 100%;
    }

the tut i saw and tried http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Upvotes: 1

Views: 4247

Answers (3)

Shailender Arora
Shailender Arora

Reputation: 7778

You can achieve your desired through display:table-cell property.

Firstly define display:table to your parent div, then define display:table-cell to your child div's, then both div will come equal vertically.

updated css

#content {
    background: #EEE;
    font: 1.5em arial, verdana, sans-serif;
    display: table-cell;
}

#sidecolumn {
    width: 500px;
    background: #000;
    display:table-cell;
}

#maincolumn {
    height: 100%;
}

#page {
    height: 100%;
    display:table;
}

https://jsfiddle.net/9dhbL8ke/

Upvotes: 5

palerdot
palerdot

Reputation: 7642

Use positioning to position the sidebar and the mainbar . . . 

 #sidecolumn {
position:relative;
top: 0px;
left:0px;
width: 100px;
height: 100%;
background: #000;
float: left;
}


#maincolumn {
position: relative;
left: 101px;
height: 100%;
}

Here is a fiddle

Upvotes: 0

Jitender
Jitender

Reputation: 7971

use equal height function

jQuery

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

$(document).ready(function() {
    equalHeight($(".eheight));

});

HTML

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

</div>
</body>

Upvotes: -1

Related Questions