主要内容后面的粘性页脚，滚动可见答案

【问题标题】：Sticky footer behind main content, visible on scroll主要内容后面的粘性页脚，滚动可见
【发布时间】：2016-11-23 01:02:23
【问题描述】：

我想重新创建在http://www.akc.org/dog-breeds/ 找到的这种显着的粘性页脚效果

我知道必须修复页脚。
我知道内容需要有更高的z-index
我猜（有点）body 需要有一个margin-bottom，它等于页脚的高度？？？

请有人帮帮我。

我正在使用 Twitter Bootstrap 4。一般标记如下所示：

<body>
    <div class="container"> <!-- This part should scroll up to reveal the footer below -->
        <!-- Content goes in here -->
    </div>
    <footer class="footer"> <!-- This should be hidden initially -->
        <div class="container">
            <div class="row">
                <!-- Footer stuff goes in here -->
            </div>
        </div>
    </footer>
</body>

【问题讨论】：

你不是刚刚在 1、2 和 3 中回答了你自己的问题吗？
可能，但我一直在玩它，还没有找到我想要的......
你说得对，容器需要位置：relative 和更高的 z-index，页脚固定，底部：0，并且 body 有 margin-bottom

标签： html css footer sticky-footer twitter-bootstrap-4

【解决方案1】：

您将要添加一个主要内容 div，然后为该 div 赋予您希望页面的背景颜色，否则您最终只会有文本重叠，但是是的，您是对的，您将希望提供主要内容div z-index 为 1 或其他值，然后将页脚固定在其后面，并给它一个小于我示例中的 z-index 的 z-index，我给它的 z-index 为 -1。然后您的主要内容 div 将滚动到您的页脚顶部。您可能希望为您的页脚设置一个高度，为您的身体设置一个相同高度的 padding-bottom。

这是我如何做到的示例Fiddle Demo：

HTML：

<div class="main-content">
  <div class="container">
    <div class="row">
      Your main Content Scroll down
    </div>
  </div>
</div>
<footer>
  <div Class="container">
    <div CLass="row">
      Footer Content
    </div>
  </div>
</footer>

CSS：

body{
  padding-bottom:200px;
}
.main-content{
  min-height:200vh;
  background:#fff;
  z-index:1;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:#000;
  color:#fff;
  z-index:-1;
}

【讨论】：

谢谢 :) 为什么我需要将第一个容器包装在另一个 div 中？我不能只为容器设置样式吗？
否，因为容器有一个最大宽度，所以您会在两侧看到页脚。