tags:

views:

16197

answers:

11

Hi,

I'm trying to get the content div to stretch all the way to the bottom of the page but so far, its only stretching if theres actual content to display. The reason I want to do this is so if there isn't much content to display, the vertical border still goes all the way down.

Here is my code

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

and my CSS

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}

div#header
{
    width: 100%;
    height: 100px;
}
#header a
{
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}

#header, #menuwrapper    {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}

#menu #menuwrapper  {
    height:25px;
}

div#menuwrapper {
    width:100%
}

#menu, #content {
    width:1024px;
    margin: 0 auto;
}

div#menu    {
    height: 25px;
    background-color:#50657a;
}

Thanks for taking a looksi

+3  A: 

you can kinda hack it with the min-height declaration

<div style="min-height: 100%">stuff</div>
Owen
+5  A: 

Try Faux Columns

Dan
A: 

Also you might like this: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

It isn't quite what you asked for, but it might also suit your needs.

Dan
+4  A: 

Try playing around with the following css rule ...

#content {
min-height: 600px;
height: auto !important;
height: 600px;
}

Change the height to suit your page. height is mentioned twice because of cross browser compatibility.

Kevin Read
+2  A: 

The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.

It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed

Gene
A: 

I dont have the code, but I know I did this once using a combination of height:1000px and margin-bottom: -1000px; Try that.

Alexander Morland
+1  A: 

While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Adam Franco
A: 

Depending on how your layout works, you might get away with setting the background on the <html> element, which is always at least the height of the viewport.

Ant P.
+5  A: 

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

-Jason

Jason Hernandez
+1  A: 

Try Ryan Fait's "Sticky Footer" solution,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.

Anjisan
A: 

I second the "Sticky Footer" solution - it is just plain elegant - http://ryanfait.com/sticky-footer/

mculloa