CSS Using 100% height DIV

Posted on 2004-11-02
Last Modified: 2012-05-05

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?


Question by:Darq_Messiah
    LVL 13

    Accepted 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:

    And, to save COBOLdinosaur some time, he'd like you to look here:

    Hope this helps :)
    LVL 53

    Expert Comment

    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

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    25 Experts available now in Live!

    Get 1:1 Help Now