Question

说明

我的网站页脚阻止移动浏览器上的内容（以及桌面上的较长页面）存在问题。

我之前见过关于这个问题的线索，但是这些关注于隐藏页脚直到用户完全向下滚动。我希望页脚“浮动”在内容下方，但是当用户一直向下滚动页面时，它会低于内容。我还需要这个允许点击页脚正上方的项目。在我的网站上，你不能点击按钮，即使它在页脚上方几行 - 也需要修复。

示例：

您可以在我自己的网站上查看此问题的示例：http://mbt.aeio.io/twitter.php

请注意，当您完全向下滚动时，即使在桌面上，按钮清晰可见，也无法点击“加载更多推文”。

我找不到我想要完成的事情的例子;这就是为什么我发布这个 - 而不仅仅是复制其他人的代码。

代码：

这是我安排页脚的代码：

<head>
      <style type ="text/css" >
         .footer{
           position: fixed;
           text-align: center;
           bottom: 0px;
           width: 100%;
         }
      </style>
</head>

这是我的页脚的ACTUAL代码：

<div class="footer">
         <div class="content">
            <div class="container" style="
               /* display: inline-block; */
               ">
               <div class="well animated slideInUp" style="
                  display: inline-block;
                  ">
                  <center>Developed with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> by mario_bros_tech, Arkagaen, and <a href="credits.php">Others</a> | Copyright &copy; 2015-2017 | All Rights Reserved</center>
               </div>
            </div>
         </div>
      </div>

我知道这是超级janky，我不应该使用容器来制作页脚，所以如果你有任何改进/清理代码的建议，那也是值得赞赏的。

如果您因任何原因需要查看CSS，它使用的是Bootstrap，可在此处找到：http://mbt.aeio.io/assets/css/

感谢您的帮助！

Answer 1

最好的事情（和正确的事情）是给身体一些底部填充物。提供以下代码：

body {
  background: #eee;
  padding-bottom: 75px;
}

我们得到了这个：

页脚阻止网站内容

1 个答案: