0

I have a website where I want to make the #content div stretch to the bottom of the page. At the moment it stretches to the bottom, but only as far as the height of the browser. How can I make it stretch the whole way?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Terms and Conditions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
    height: 100%;
}
body {
    margin: 0px;
    padding: 0px;
    font-family:"Lucida Grande",Sans-serif;
    background-color: #234595;
}
a {
    font-size: 10pt;
    color: #234595;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
#content {
    position: relative;
    background-color: #ffffff;
    width: 800px;
    min-height: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
#logo {
    position: relative;
    top: 10px;
    float: right;
}
#title {
    position: absolute;
    top: 200px;
    left: 50px;
    right: 0px;
    color: #234595;
    font-family: "Helvetica",Sans-serif;
    font-weight: bold;
    font-size: 32pt;
}
#subtitle {
    position: absolute;
    top: 240px;
    left: 50px;
    right: 0px;
    color: #333333;
    font-family: "Helvetica",Sans-serif;
    font-weight: bold;
    font-size: 10pt;
}
#message {
    position: absolute;
    float: left;
    top: 255px;
    left: 50px;
    right: 50px;
    color: #333333;
    font-weight: normal;
    font-size: 10pt;
    line-height: 200%;
}
* html #content {
    height: 100%;
}
</style>
</head>
<body>
<div id="content">
    <img src="images/logo.gif" id="logo" />
    <div id="title">
        Terms and Conditions
    </div>
    <div id="subtitle">
        for something or other.
    </div>
    <div id="message">
        Insert Lorem Ipsum here.
    </div>
</div>
</body>
</html>

1 answer

0
points

Can you be more specific on what you mean by "stretch to the bottom of the page?" You could have:

1.) The footer fixed to the bottom of the SCREEN at and have the site scroll behind it (footer would be visible at all times), or 2.) The footer on the bottom of the PAGE with the content pushing it down. In this case, thefooter would only be visible when you scroll to it, but if there was less content than can fit in your browser window it would still default to the bottom).

I think you're talking about option 2, so I'll explain that one...

OPTION 2: Here's the CSS you'll need:

html, body { margin:0; padding:0 0 60px 0; height:100%; } // The 60px of padding on the bottom is the height of your footer

#content { min-height:100%; position:relative; }

#footer { position:absolute; bottom:0; width:100%; height:60px; }

// For IE 6
#content { height:100%; }

As long as you make sure your footer is INSIDE your div with the ID of "content," this method should work for you.

Answered about 6 years ago by Jared Tomeck
  • Ok, so if I didn't have a particular footer then I could just make a <div id="footer" /> and put a width of 0 in the CSS? about 6 years ago
  • Well, I guess I should have asked this to begin with. Do you have a sample of what you're actually trying to do? I assumed you were trying to get a footer to stick to the bottom of the screen by making the height of the site 100%. Jared Tomeck about 6 years ago
  • Also, I noticed in your code that you have a lot of divs positioned absolute. It might be more beneficial for you to use floating, margins, and paddings instead to position the elements on your page. For example, if you have an element underneath a content area that is positioned absolute, when you add text to the content area it will eventually extend over the top of (or below depending on what you set z-index to in your css) the element. Jared Tomeck about 6 years ago