内容流过粘性页脚

Question

我的网站有一个包装器，目前我是第一次用 HTML5 编写一个功能齐全的网站，但在让我的页脚“粘”到包装器底部时遇到问题。

当我摆弄 CSS 时，有时我会成功地让页脚粘在包装器的底部，但是如果包装器的内容（文章/部分）超出浏览器的折叠，那么包装器中的内容打破包装器边缘，因为包装器的高度似乎只是屏幕分辨率的高度（在这种情况下为 768）。所以内容最终会出现在页脚后面。

无论如何代码：

     <footer>

    <p><small>&copy; Copyright blahdeblah 2013. All Rights Reserved.</small></p>

    </footer>

CSS：

html,body{
height:100%;
}

   #wrapper {
height:100%;
margin:0px auto;
position:relative;
width:900px;
}

footer{
background:#B4B4B4;
border:5px solid #FFFFFF;
height:50px;
line-height:45px;
position:absolute;
bottom:0px;
text-align:center;
width:100%;
}

所以基本上我的包装器并没有随着内容扩展:(

Answer 1

如您所见，包装器的高度设置为 100%。这意味着包装器的高度不会超过用户屏幕的高度，即使其中的内容可能。删除 'height:100%' 部分应该可以解决您的问题。如果用户的屏幕比包装器中的内容短，则会出现一个滚动条。