Question

我已尝试将以下网站页脚仅停留在一个页面的底部。（在所有其他页面上，它按计划运行但不在一个页面上，为什么会这样？）

这就是我正在使用的内容，虽然它有效，但并不适用于所有手机/平板电脑设备。

帮助？

Answer 1

我没有在探索您的查询，但现在您可以使用以下标记来实现粘性页脚：

<div class="page-wrapper">
    <header>Hi! I'm Header!</header>
    <main>And I'm Main content section! Let's rock!</main>
    <footer>Hi! I'm Footer!</footer>
</div>

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 100vh;
    width: 100%;
}

header,
footer {
    height: 50px;
}

main {
    flex: 1;
}

查看here

上的小提琴

Answer 2

我过去使用过这种方法，效果很好。

HTML：

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

页脚不粘在页面底部媒体查询

2 个答案: