5 replies [Last post]
intrepidus
Offline
Regular
Last seen: 12 years 25 weeks ago
Joined: 2004-09-26
Posts: 12
Points: 0

Is there a way to make a div vertically fill the entire page, no matter how much content is in it? It seems that, even when I set it to 100%, it only stretches as far as the content I put in it. I want to anchor a copyright to the bottom of the page, but I can't do that until I figure out the height.

Guy
Guy's picture
Offline
Enthusiast
Cambridge, UK
Last seen: 8 years 21 weeks ago
Cambridge, UK
Timezone: GMT+1
Joined: 2004-04-26
Posts: 54
Points: 0

100% height

A very common question! I would think if you search the forum you'll find plenty of comments and suggestions!

Basically, you will find a a big gap in support for vertical positioning with css, making it extremely hard to position elements in the center of your page for instance. However, there are ways of using the height property with 100%!

Here is one way to to put a footer that sticks to the bottom of the page! http://www.alistapart.com/d/footers/footer_dom1.html!

Hope that's of some help!

Guy

Who discovered we could get milk from cows, and what did he THINK he was doing at
the time? - Billy Connolly

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

100% height

Have you set height 100% in the body rules? percentage has to be relative to something!

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

intrepidus
Offline
Regular
Last seen: 12 years 25 weeks ago
Joined: 2004-09-26
Posts: 12
Points: 0

100% height

I set the 100% height in the body. Firefox likes it, but IE doesn't render it as 100%.

As for the footer solution, it didn't work. While it did put #footer as a footer, at the bottom of the page, it broke it free of all my #content rendering; no background, no font size, nothing. The example is meant to work with relative #content - is it dying because mine is absolutely positioned?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 15 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Re: 100% height

intrepidus wrote:
<snip> I want to anchor a copyright to the bottom of the page, but I can't do that until I figure out the height.
Scott Sauyet gets thanks for this method.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta name="generator" 
    content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" /> 
    <meta name="editor" content="Emacs 21" /> 
    <meta name="author" content="Gary Turner" /> 
    <meta http-equiv="content-type" 
    content="text/html; charset=ISO-8859-1" /> 
 
    <title>Footer Test</title> 
 
<style type="text/css"> 
/*<![CDATA[*/ 
 
 html, body, #wrapper { 
    min-height: 100%; /*Sets the min height to the 
    height of the viewport.*/ 
    width: 100%; 
    height: 100%; /*Effectively, this is min height 
     for IE5+/Win, since IE wrongly expands 
     an element to enclose its content. 
     This mis-behavior screws up modern   
     browsers*/ 
    margin: 0; 
    padding: 0; 
    } 
 
#wrapper { 
    } 
  
html>body, html>body #wrapper { 
    height: auto; /*this undoes the IE hack, hiding it 
     from IE using the child selector*/ 
    }  
 
body { 
    margin: 0; 
    font-family: Arial, helvetica, sans-serif; 
    } 
  
#wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 
  
#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    text-align: center; 
    } 
  
#main { 
    margin-bottom: 3em; /*Modify value as needed for   
      footer height.*/ 
    height: auto; 
    padding: .5em; 
    } 
 
/*]]>*/ 
</style> 
  </head> 
 
  <body> 
    <div id="wrapper"> 
      <div id="main"> 
        <p>Put your whole page here.</p> 
      </div> <!-- end main --> 
      <div id="footer">  
        <p>Put your footer stuff here.</p> 
      </div> <!-- end footer --> 
    </div> <!-- end wrapper -->  
  </body> 
</html>
This will anchor the footer to the bottom of the viewport unless the content is longer. In that case, the footer will be at the bottom of the content. This works in all Moz browsers and in IE5+/Win. Safari and IE fail gracefully in Mac, the footer attaching itself to the bottom of the content. It works to some extent in Opera 7 (it's ugly) and not at all in Opera6 and older.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mælstrøm
Offline
Regular
Germany
Last seen: 12 years 31 weeks ago
Germany
Timezone: GMT-1
Joined: 2005-01-02
Posts: 46
Points: 0

Another Idea

What I once did for the same trouble was that I added bottom-padding of 100px or something to a div... I think it was the wrapper element, but I am not positive on that. I would have to find the old code for that... but you should employ it as an IE hack... coz the height 100% is correct code.

- How many Sith does it take to screw in a light bulb?
- Only two a master, and an apprentice!