asked on

CSS Using 100% height DIV

Hi,

just started out trying CSS instead of tables for layout. But ran into a little problem, hope one of you can help. My goal is, to make a 3-column style page, but I want the left column (using a colored background) to be 100% heigth.

Code:

<html>
<head>
<style type="text/css">

html, body {
height: 100%;
}

body {
margin: 70px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
background-color: #FEF8F1;
}

#left {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
border: 0px;
background: #F0A505;
width: 306px;
height:100%;
}

#middle {
margin: 0px 180px 70px 320px;
padding: 0px;
border: 0px;
}

#right {
position: absolute;
top: 50px;
right: 0px;
margin: 20px;
padding: 10px;
border: 2px solid #ccc;
background: #FFFFFF;
width: 150px;
}
</style>

<title>3 Column layout</title>
</head>
<body>

<div id="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

<div id="middle"><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</div>

<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

</body>
</html>

So far so good. But if I insert more text in the middle column, a scrollbar appears and when I scroll down, the left column background-color ends. It looks like, the 100% heigth only applies at the initial viewable area of the browser.

Anyone knows the answer to this *small* cosmetic problem?

Thanx,

DM

ASKER CERTIFIED SOLUTION

cLFlaVA

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

lol good link :^)

The height of an element can be forced to the height of the page with scripting.

In the head of the page:

<script type="text/javascript">
function resetHgt()
{
H-=document.getElementById('left').offsetTop+document.body.scrollHeight
document.getElementById('left').style.height=H+'px';
}
onload=resetHGT;
onresize=resetHGT;
</script>

Cd&