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

Question

嗨，我很难固定页脚。

其他页面由于内容的原因是粘性的。但是在空白页面或内容很少的页面上不起作用。

代码：

html, body {
    height: 100%;
}
footer {
    position: absolute;
    bottom: 0;
}

如果我用

position: absolute;
bottom: 0;

它在这个页面上有效，但在其他页面上无效。还尝试了 min-height

Answer 1

试试这个：

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

footer {
    bottom: 0;
    position: absolute;
}

Answer 2

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

我相信对我有用的是第二个："The simplest solution is to use min-height on the html tag and position the footer with 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;
}

希望对您有所帮助！

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

How to get sticky footer on every page

css

sticky

footer