粘性页脚将内容隐藏在我的网站底部答案

【问题标题】：Sticky footer is hiding content at the bottom of my website粘性页脚将内容隐藏在我的网站底部
【发布时间】：2018-12-11 01:02:33
【问题描述】：

我为 Wordpress 网站创建了一个粘性页脚。我为该部分提供了 ID #formfooter 并使用了以下 CSS：

#formfooter{
    position:fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
}

现在我想相应地扩展website's 的高度。当用户向下滚动到底部时，粘性页脚会覆盖底部的内容。我怎样才能让它向下滚动一点？

【问题讨论】：

在这种情况下，通常会给内容一个边距：#content {margin-bottom: heightOfFooterPx;}

标签： html css wordpress

【解决方案1】：

这是因为您的内容显示在您的置顶栏后面。你需要你的容器（即包含你的信息的容器）有一个margin-bottom，这样它就不会在你的粘性内容后面显示信息。

假设你的布局看起来像这样：

<body>
 <div class="container">

   THE CONTENT OF YOUR HTML PAGE

 </div>
 <div class="sticky-footer">
      YOUR STICKY FOOTER, let's say it take 20px as height
 </div> 
</body>

你需要做类似的事情：

.container {
   margin-bottom: 20px; (i.e. the size of you sticky content)
}

【讨论】：

【解决方案2】：

您可以做的最好的事情是手动将粘性页脚添加到 footer.php 和其上方的 div 以调整高度以获得最佳结果！

PS：网站的滚动速度真的很快！不能像这样对用户不友好。请查看滚动速度设置。

【讨论】：

【解决方案3】：

尝试更改您的#formfooter 位置（使用粘性，不固定）。这应该允许您的整页内容可滚动/可查看。

#formfooter{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  bottom: 0px;
  width: 100%;
  z-index: 999;
}

【讨论】：