如何将页脚保持在页面底部（HTML Javascript CSS）[关闭]答案

【问题标题】：How to keep the footer at the bottom of the page (HTML Javascript CSS) [closed]如何将页脚保持在页面底部（HTML Javascript CSS）[关闭]
【发布时间】：2018-11-24 04:32:24
【问题描述】：

如何将页脚保持在页面底部？这是我的代码：

<footer> Copyright 2013 All rights reserved.

就是这样。是否有任何 CSS 可用于将页脚拉到页面底部，因为当我使用 <footer> 代码时，它会停留在中间而不是底部。

【问题讨论】：

你能在jsbin.com写一个demo吗

标签： html css sticky-footer

【解决方案1】：

你可以只使用 CSS：

.footer {
    position:fixed;bottom:0;

    width:100%;
    display:block;
}

【讨论】：

这将使页脚粘在浏览器窗口的底部，始终可见，如果页面较长，则与其他内容重叠。我认为 OP 需要澄清他们是否想要这样做，如果这只是关于未折叠的较短页面。
啊啊啊。好吧，如果 OP 想要别的东西，我会使用 jquery waypoints (imakewebthings.com/jquery-waypoints) 来监听滚动点（或其他元素）的位置，当达到阈值时，执行上述操作。

【解决方案2】：

我使用：

#footerbox {
height:125px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FF9966;
font: normal 13px verdana, sans-serif;

我建议将高度设置为您喜欢的任何值，但我会保持较大以包含所有信息，如法律资料、联系信息等。然后，为了版权，我使用

#copyright {
height:20px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font: normal 13px verdana, sans-serif;
border-top:2px solid #FF9966;
}

希望这会有所帮助。您还可以将宽度设置为您想要的任何值，像素或百分比。如果这是您想要的，将其连接到底部并不难。要使版权与较大的页脚重叠，只需使用

.class{
clear:both;
}

在 CSS 的顶部，然后像这样清除 HTML 中的 P 标签

<div id="copyright">
<p class="clear">&copy herp derp</p>
</div>

【讨论】：

【解决方案3】：

1) 给<body> 100% 的高度

body { height:100%; }

2) 假设 HTML 结构如下：

<div id="container">
  some content
</div>
<footer>
  Copyright 2013 All rights reserved.
</footer>

，假设您的<footer> 的高度为40px，请将其添加到#container：

#container { min-height:100%; padding-bottom:40px; margin-bottom:-40px; }

【讨论】：