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％'部分应解决您的问题。如果用户的屏幕将短于包装器中的内容，则会出现一个滚动条。

内容流过粘性页脚

1 个答案: