#1
  1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,534
    Rep Power
    221

    Footer at the bottom of the page if there is no content in the body


    Hi;

    How can I get a footer to stick to the bottom of the page even if there is no content in the body of the page?

    If the user has to scroll, they only see the footer when they get to the bottom of the page.

    in other words, I am not looking for fixed position footer.

    Thanks

    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>
    		<!--Don't add anything above this line, you may change the DTD to match your page-->
    		<title>Test Page</title>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		<!--Uncomment the following line and remove the embedded style sheet if your style is external-->
    		<!--<link rel="stylesheet" href="includes/style.css" type="text/css" />-->
    		<style type="text/css">
    /*add your styles here, or remove this section if your styles are external*/
    body{
      background-color:#ffffff;
    }
    </style>
    	</head>
    	<body>
    		<footer>Stay at the bottom</footer>
    	</body>
    </html>
  2. #2
  3. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,534
    Rep Power
    221
    Anyone?
  4. #3
  5. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,162
    Rep Power
    2011
    A search on Google yields several results.
    Have you tried any of these?
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Somerville, MA
    Posts
    51
    Rep Power
    72
    Code:
    body {
     min-height:100vh;
    }
    footer {
     position:fixed; 
     bottom:0;
    }
    Web Developer/Designer here
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4308
    It's sounds like you're asking how to make a "sticky footer." Here's a good article on that: CSS

    (Other articles I used to link to about that seem to have disappeared.)
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo