如何在每个页面上获得粘性页脚

Posted 2023-03-21

【中文标题】如何在每个页面上获得粘性页脚

【英文标题】：How to get sticky footer on every page

【发布时间】：2017-08-24 12:32:13

【问题描述】：

您好，我无法让页脚变粘。

其他页面因内容而粘滞。但是在空白页面或内容很少的页面上不起作用。

代码：

html, body 
    height: 100%;

footer 
    position: absolute;
    bottom: 0;

如果我使用

position: absolute;
bottom: 0;

它适用于此页面，但不适用于其他页面。也尝试过最小高度

【问题讨论】：

将 absolute 更改为 fixed 并为您的内容添加足够的底部填充，使其无法在页脚后面完成

我无法访问您的网站，因此不知道您的标记在不起作用的情况下是什么。您应该包含有问题的标记和 CSS，最好是在链接之外的代码 sn-p 中。否则，您最好删除链接，因为您的网站更改或链接已失效，问题不再在上下文中，对未来有类似问题的用户的帮助较小。

@Pete 但它在屏幕上保持滚动

在这种情况下，您需要提供更多的代码和解释，就像您给出的一样，根本没有解释，看起来好像您只是想将页脚放在视口底部- 高度 100% 表示主体不会大于视口。此外，还有许多易于使用的粘性页脚的好例子，那么为什么不使用一个而不是重新发明***呢？

【参考方案1】：

试试这个：

#page 
    min-height: 100vh;
    position: relative;


footer 
    bottom: 0;
    position: absolute;

【参考方案2】：

我也在为此苦苦挣扎，但在这个问题上找到了我的解决方案：Make footer stick to bottom of page correctly

我相信对我有用的是第二个：“最简单的解决方案是在 html 标记上使用 min-height 并将页脚定位为 position:absolute;”

DEMO

HTML :

<article><!-- or <div class="container">, etc. -->
 <h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
 <h1>Footer Content</h1>    
</footer>
CSS :

html 
position: relative;
min-height: 100%;


body 
margin: 0 0 100px; /* bottom = footer height */
padding: 25px;


footer 
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;

我希望这会有所帮助！