Html 良好的ol'；页脚问题

这样我的脚就不会往下掉了。它只是出现在我的页面中间。我打赌你已经多次看到这个问题，但我确实需要一些帮助，因为我已经阅读了大量的线程，并且我已经尝试了这里概述的一般解决方案：

我将链接我的代码，希望你能注意到为什么解决方案不适合我

HTML:

---

在代码中，页脚作为id包装器 将位置从绝对更改为固定

#wrapper {
     position: fixed;
}

---

它看起来好像出现在你的页面中间，因为当你绝对地定位某物时，你就把它从它的自然流中拿走了。您不需要绝对定位它，因为您的文档是从上到下读取的，并且您希望在页面底部显示的div，因为根据HTML的结构判断，页脚已经在下面了。尝试移除绝对位置。给它一个清晰的提示：当你在做的时候两者都是，这样就不会有任何东西出现在它的两侧。让我知道这是否有效。还有。。。请将

更改为

。无论我的内容有多长，现在有没有办法让它保持在底部？（并且不让我的内容通过页脚）。图片中的新问题：（因为问题是新的，我应该提出一个新问题吗？）这会改变情况，但当我滚动时，页脚也会滚动。我希望页脚位于页面底部，而不是随页脚一起滚动。这是一行：#wrapper{position:fixed；bottom:0；width:100%；height:60px；/*页脚高度*/}它仍然滚动。position:fixed；似乎让它滚动？

body, html {
margin: 0;
padding: 0;
height:100%;
}

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

.menu {
width:550px;
height:35px;
font-family:Trajan Pro;
font-size:18px;
text-align:center;
font-weight:bold;
text-shadow:3px 2px 3px #333333;
margin-left:1010px;
position:absolute;
top:150px;
}
.menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    list-style-type: none;
}
.menu li {
display: inline;
padding: 20px;
}
.menu a {
text-decoration: none;
color:white;
}
.menu a:hover {
text-shadow: 8px 5px 8px #333333;
font-size:20px;
}

#content {
min-height:100%;
position: relative;
width: 800  px;
height: 800px;
margin-right:200px;
margin-left:200px;
padding:10px;
padding-bottom:60px;   /* Height of the footer */
}

#block1 { /*IGNORE THIS. I AM SAVING IT FOR LATER*/
    background: red;
    filter:alpha(opacity=20); /* IE */
    -moz-opacity:0.2; /* Mozilla */
    opacity: 0.2; /* CSS3 */
    position: absolute;
    top: 0; left: 0;
    height: 100%; width:100%;
    border-radius: 20px;
    margin:10px;
}

#meginmal {
padding: 20px 30px 20px 30px;
text-align: center;
font-size:20px;
border-right: solid;
border-left: solid;
font-family: Trajan Pro;
}

#bordi {
height:100%;
width: 100%;
margin: 0%;
padding: 10px;
  }



#wrapper {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

#wrapper {
     position: fixed;
}