页脚没有粘在页面媒体查询的底部答案

【问题标题】：footer not sticking at the bottom of the page media queries页脚没有粘在页面媒体查询的底部
【发布时间】：2016-07-21 02:36:09
【问题描述】：

我已尝试以下方法让我的网站页脚仅停留在一页的底部。（在所有其他页面上，它都按计划工作，但在一个页面上却没有，这是为什么呢？）

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

帮助？

【问题讨论】：

@media screen and (min-width : 567px) and (max-width : 661px) { .page-id-94 .site-footer { clear: both;宽度：100%；高度：10%；位置：相对；底部：-750px；填充顶部：1％； } }
@media screen and (min-width : 220px) and (max-width : 420px) { .page-id-94 .site-footer { clear: both;宽度：100%；高度：10%；位置：相对；底部：-1050px；填充顶部：1％； } }
@media screen and (min-width : 221px) and (max-width : 241px) { .page-id-94 .site-footer { clear: both;宽度：100%；高度：10%；位置：相对；底部：-1500px；填充顶部：1％； } }
如果你不分享代码，我们帮不了你。
不要那样做。使用 .footer{ 位置：固定； bottom:0, left:0;} 当然，这取决于其他一些事情，如果没有您的整个标记和 css，就无法判断。

标签： css media-queries footer

【解决方案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的小提琴

【讨论】：

【解决方案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%;
}

【讨论】：

这对我不起作用，因为复制该代码意味着我的部分页面被白色容器覆盖。我把它写成 .pg-id-94 .site-footer html { position: relative;最小高度：100%； } 正文 { 边距：0 0 100px; /* 底部 = 页脚高度 */ } 页脚 { 位置：绝对；左：0；底部：0；高度：100px；宽度：100%； }
也许我需要以不同的方式重写代码，但我不知道如何。