I can't keep the footer fixed to the bottom of screen when zoomed out

Question

i am trying to keep the footer div at the bottom of the screen when the content is shorter than the view port, but it also has to remain at the bottom on the page content(not the view port) when the content is taller than the view port.

So far it remains at the bottom of the content when zoomed in, but i can't get it to stick to the bottom when zoomed out. There are samples with position: absolute; that i have seen, but it makes the footer remain at the bottom of the view port and not the content when zoomed in.

I have to do this for a school unit, is there a way to do this?

For now i have the footer position as relative, though i guess that wont do anything but stick it close to the last div, yeah? but i seem to find what i need to do.

Here is the site: http://www.foodforthought.webatu.com/Index.html When you zoom right out you will see the footer not stay at the bottom.

Here is my CSS:

* { padding: 0; margin: 0; font-family: verdana; }

html {
  height: 100%;
}


body {
font-size: 13px; 
color: #000; 
background-color: white;
background-position: center;
background-repeat: repeat-y; 
background-image: url('../images/background.jpg'); 

}

/* Main div container */
#wrapper {
margin: 0 auto;
width: 960px;
height: auto;
}

/* Header div */
#wrapper #header {
  height: 200px;
  background-color: green;

}

/* Special event section */
#header p {
position:relative ;
left: 30px;
top: -100px;
width: 300px;
z-index: 1;
color: white;
border-style: dashed;
padding: 5px;
border-width: 1px;
}

/* Horizontal list div */
#wrapper #navigation {
  height: 25px;
 background-color: white;
 display: block;

 }

/* Horizontal list */
#navigation ul {
 padding-top: 5px;
 list-style-type: none;
 text-align: center; 
 width: 960px

}

/* Horizontal list items */
#navigation li {
 display: inline-block;
 text-transform: uppercase;
 vertical-align: middle;
}

/* Horizontal list link */
#navigation a {
 height: 25px; 
 width: auto;
 display: block;
 line-height: 15px;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
 color: black;
 padding-left: 8px;
 padding-right: 8px;
}

/* Horizontal list hover attribute */
#navigation a:hover {
 color: Darkgrey;
 }


 /* Content div */
 #wrapper #content {
 display: inline-block;
 height: auto;
 width: 950px;
 background-color: white;
 padding-left: 10px;
 padding-right: 0px;
 }

/* Content headings */
#content h2 {
text-transform: capitalize;
padding: 10px;
}

/* Content image(global) */
#content img {
padding: 2px;
border-width: 1px;
margin: 10px;
margin-left: 20px;
Margin-right: 15px;
}

/* Content bullet list */
#content ul {
padding: 15px;
font-size: small;
margin-left: 10px;
}

/* Content paragraph text */
#content p {
padding-left: 10px;
font-size: small;
}

/* Content image */
#content #img1 {
float: left;
border-style: dashed;
}

/* Content image */
#content #img2 {
float: right;
border-style: solid;
border-width: 1px;
border-color: #BDA27E;
}

/* Content image */
#content #img3 {
float:left;
border-style:double;
margin-top: 20px;
margin-left: 8px;
border-width: 5px;
border-color: #996633;
}

/* Side menu div*/
#wrapper #content #menu {
 float: right;
 padding: 0px;
 margin: px;
 width: 220px;
 height: 1118px;
 }

/* Side menu*/
#menu ul {
 list-style-type: none;
 float: right;
 text-align: right; 
 width: 170px
}

#menu li {
background-image: url('../images/pg_menu_bg.png');
}


/* Side menu link */
#menu a {
 height: 30px; 
 display: block;
 vertical-align: middle;
 text-decoration: none;
 color: black;
 font-size: small;
 padding-top: 8px;
 margin-left: 10px;
 margin-right: 0px;
 }

/* Side menu hover attribute */
#menu a:hover {
color: darkgrey;
}

/* Footer div */
#wrapper #footer {
 height: 40px;
 background-color: #82AAF1;
 width: 960px;
 margin: 0px, auto;
 position: relative;
 bottom: 0;

}

/* Foot note */
#footer p {
text-align: center;
color: #6A1B1B;
padding-top: 15px;
font-size: 10px;
}

.padext {
padding-top:2px
}

Sorry i am still a beginner.

Thank you for you time.

Answer 1

If you HTML is like this:

<body>
<div id="wrapper">
    <div id="header"></div> 
    <div id="content"></div>
    <div id="footer"></div>
</div>

apply the following CSS.

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


#content {
padding:10px;
padding-bottom:80px;   /* Height of the footer element */
}

The padding-bottom of the #content is set as the height of the footer.

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

I recommend you to refer the following link : How To Keep Your Footer At The Bottom Of The Page With CSS