缩小时无法将页脚固定在屏幕底部

当内容比视口短时，我试图将页脚div保持在屏幕底部，但是当内容比视口高时，它也必须保留在页面内容的底部（而不是视口）。查看端口。

到目前为止，在放大时它仍位于内容的底部，但在缩小时我无法使其停留在底部。有些样本的位置是：绝对；我已经看到了，但是它使页脚保留在视口的底部，而不是放大时的内容。

我必须为学校单位执行此操作，有没有办法执行此操作？

现在我的页脚位置是相对的，尽管我想除了将其贴近最后一个div不会做任何事情，是吗？但是我似乎找到了我需要做的。

这是网站：http : //www.foodforthought.webatu.com/Index.html当您进行缩小时，您会看到页脚不在底部。

这是我的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
}

对不起，我还是一个初学者。

谢谢您的时间。