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

【问题标题】：How to make a Sticky footer with bootstrap?如何使用引导程序制作粘性页脚？
【发布时间】：2016-12-02 00:38:37
【问题描述】：

在学习了大量的粘性页脚教程后，我被卡住了。
谁能解释我的粘性页脚哪里出错了？
主要思想是页脚位于页面底部。
如果页面比窗口大，那么页脚在向下滚动后应该是可见的。

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

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>

【问题讨论】：

请考虑重新定义您的“粘性”概念，这是粘在整个页面的底部还是窗口底部，而且您提供的链接不起作用
@Simplicity 谢谢。我已经编辑了问题

标签： html css twitter-bootstrap

【解决方案1】：

您可以在#wrap 上使用min-width。看看这个Codepen

就像：

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

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;
}

<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>

【讨论】：

【解决方案3】：

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

如果您将页脚样式更改为此，您将得到一个 Sticky Footer，它具有响应性，并且无论其父元素大小如何设置都可以使用，因为它取决于屏幕。

【讨论】：

这是在窗口中添加粘性页脚的好方法！但不是我需要的。这个想法是让它在内容下方具有粘性。或者如果内容太小而不能让它粘在底部
你最初的问题解释得很糟糕，很抱歉没有理解。