Question

在跟踪了一些粘性页脚教程后，我被卡住了。
任何人都可以解释我的粘性页脚出错的地方吗？主要思想是页脚位于页面底部如果页面大于窗口，那么在向下滚动后应该可以查看页脚。

代码在主页上正常工作，除了我在页脚下面有一点空间只要内容大于窗口，页脚就会停止工作。

CSS：

html, body {
    min-height:100%;
    height:100%;
    margin: 0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    background-color: #2b2d2f;
    color: #d9edf7;
}
#wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -30px;
}

#wrap:after {
    content: "";
    display: block;
}

#footer, #wrap:after {
    height: 30px;
}
#footer{
    background-color: #2b542c;
    text-align:center;
}

HTML：

<div id="wrap">
 ... content...
</div>
<div id="footer">
 ... content ...
</div>

Answer 1

您可以min-width使用#wrap。看看 Codepen

就像：

#wrap {
    min-height: calc(100vh - 30px); /* '30px' - Height of the footer */
}

希望这有帮助！

Answer 2

＆＃13;

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%;
    background-color:red;
}

＆＃13;

<body>
    <nav></nav>
    <article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</article>
    <footer></footer>
</body>

＆＃13;

Answer 3

#footer {
    background-color: #2b542c;
    text-align: center;
    position: fixed;
    width: 100vw;
    top: calc(100vh - 30px);
}

如果你改变你的页脚样式，你会得到一个粘滞页脚，它是响应性的，无论它的父元素大小如何设置都会起作用，因为它依赖于屏幕

如何用引导程序制作粘性页脚？

3 个答案: