Question

所以我的页脚遇到了这个问题。基本上，我设法使页脚总是出现在网页的底部...当网站的内容没有达到它时。但是，当内容到达页脚时，您显然需要向下滚动。但是，当滚动页脚停留时它是。这是一个绝对的位置。

所以，我把位置改为固定，以这种方式看待它。页脚总是停留在页面的底部，但是当它停留在那里时甚至滚动。

我需要的是页脚总是位于内容的底部，除非内容不足以填满用户的屏幕，在这种情况下页脚移动到屏幕的底部。我的页脚CSS是下面的。有什么想法吗？

footer{
    position: fixed;
    height: 40px;
    background-color: #F1F0EE;
    color: #999;
    bottom: 0;
    width: 100%;
    padding-top: 10px;
    text-align: center;
}

非常感谢提前。

Answer 1

假设您知道内容的高度，可以使用简单的双div布局实现此目的 - JSFiddle

HTML

<div id="content">Content</div>
<div id="footer">Footer</div>

CSS

body, html {
    height:100%;
    margin:0;
    padding:0;
}
#content {
    height:100%;
    min-height:300px; /* This is the height of your content + height of the footer */
}
#footer {
    margin-top:-100px;
    height:100px;
    background:#f00;
}

Answer 2

您可以使用三行表作为布局，并将您的页脚内容放在第三行。希望它有所帮助

CSS：即使在滚动时，也会将页脚始终放在页面底部

2 个答案: