[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2128
  • Last Modified:

CSS Using 100% height DIV


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.


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

#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;

<title>3 Column layout</title>

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

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

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


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?


1 Solution
Unfortunately, height: 100% is not 'valid'.

100% is a relative reference - it means, the height of this thing is 100% of the height of it's parent thing.  The only way 100% height becomes valid is if the height of the parent thing is absolutely set (600px, for example).  There are ways around this, however.

My favorite resource for this problem lies here: http://www.alistapart.com/articles/fauxcolumns/

And, to save COBOLdinosaur some time, he'd like you to look here: http://webhost.bridgew.edu/etribou/layouts/skidoo/demos/three_left.html

Hope this helps :)
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()



Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now