CSS：即使在滚动时也使页脚始终位于页面底部

Posted 2023-03-06

【中文标题】CSS：即使在滚动时也使页脚始终位于页面底部

【英文标题】：CSS: Make footer always at bottom of page even on scroll

【发布时间】：2013-12-19 17:42:08

【问题描述】：

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

所以，我将位置更改为固定，以便以这种方式查看。页脚总是停留在页面底部，但当你滚动时它会停留在那里。

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

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

非常感谢。

【问题讨论】：

我认为你需要使用 javascript 来做到这一点

老实说，我确实已经想到了这一点，但在我开始做任何事情之前，我想确保你不能用 css 做任何事情。可惜你真的做不到。感谢您的回复。我想我会保持它不变，因为这不是一个糟糕的结果，而且只有几页包含大量内容。总之谢谢

【参考方案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;

【参考方案2】：

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

【讨论】：

不，那不是上帝。我永远不会通过表格来构建网站。不过还是谢谢:)

@davidb : 为什么 *** 上的每个人都反对表格格式？

@FranckNgako literal <table> 应该只用于实际的表格数据。然而display: table 是完全有效且被广泛使用的，特别是如果您想创建流畅的设计。

@FranckNgako 我认为当网页上有实际表格时表格很好。如果您不创建表格，那么 CSS 就是您的朋友。

@FranckNgako 表格在早期的 Web 开发时代被成功使用，随着 div 布局和响应能力的进步，表格（用于 HTML 布局）正在变得过时。事实上，您可以比表格更好地引导网格。如果表格最终被弃用并遭受与旧框架布局相同的消亡，我不会感到惊讶。和 P.S.并不是 SO 中的每个人都反对表格，而是每个前端开发人员都反对；）大声笑