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

我认为对我有用的是第二个：“最简单的解决方案是在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;
}

我希望这有帮助！

如何在每个页面上粘贴页脚

2 个答案: