粘性页脚隐藏了我网站底部的内容

Roz*_*ber 1 html css wordpress

我为Wordpress网站创建了一个粘贴页脚。我给了该部分ID,#formfooter并使用了以下CSS:

#formfooter{
    position:fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
}
Run Code Online (Sandbox Code Playgroud)

现在,我想相应地扩大网站的高度。当用户向下滚动到底部时,粘性页脚将覆盖底部的内容。我如何使其向下滚动一点?

Dja*_*mel 5

这是因为您的内容显示在粘性栏的后面。您需要您的容器(即包含您的信息的容器)有一个容器,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>
Run Code Online (Sandbox Code Playgroud)

您将需要执行以下操作:

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

  • 如果页脚的高度不确定怎么办? (2认同)