• 0

make a div span the whole height?


Question

hey guys i was wondering how to make a div span the whole height of the page (even if the page is longer, causing scrollbars)?

i put height:100% in my stylesheet but it doesnt seem to do it.. it just spans the height of the browser, and when the page is longer it stops at the height of the browser and not span all the way down..

any suggestions? thx.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

try adding:

position: absolute;

or

position: relative;

to the definition of the tag, the div tag should be nested inside of something (like table) for the it to work properly. although that is just the CSS Standard, I don't know every browser supports it.

When making a page I just go with the CSS Standard from W3C and don't care much about the browsers, although explorer usually does the job well :)

mozilla is a pain in the soft hemisphere :laugh:

Link to comment
Share on other sites

  • 0

To fix the problem, you need to set the height of one of your containing blocks to a fixed value. For some reason, percentages don't work for height unless they have a fixed value to work off from. For example, take this HTML code fragment:

<body>
<div class="main">
    <div class="columnA">
        This is column A
    </div>
    <div class="columnB">
        This is column B
    </div>
</div>
</body>

and its corresponding stylesheet:

body
{
    border: thick solid red;
    height: 500px;
}

div.main
{
    border: thick solid blue;
    height: 100%;
}

div.columnA, div.columnB
{
    float: left;
    width: 45%;
    height: 100%;
}

div.columnA
{
    border: thick solid green;
}

div.columnB
{
    border: thick solid orange;
}

All the heights were explicitly defined because all the blocks are related to each other. If the body height was changed to a percentage or removed altogether, the heights of all its child divs would have no reference value and display improperly.

This example is a little more complicated because I threw in some floats to make some columns. Just realize that when you throw in float or position properties, you're potentially pulling those blocks out of normal flow, which could affect how your dimensions are displayed.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.