Question

我遇到内容隐藏在页脚后面的问题。我看到如果我从固定的tot改变位置继承它有帮助，但页脚将位于页面的底部。我想在任何时候看到页脚，只能滚动正文内容。

我们正在使用AngularJS和Bootstrap

Answer 1

您必须为您的身体提供margin-bottom x像素，其中x是页脚的高度（或多或少）。

Answer 2

尝试将粘性页脚的高度设置为最后一个内容div ，这有助于显示您的内容。请查看下面的代码段以供参考。

padding-bottom

.last-content{  
  margin-top:500px;
  padding-bottom: 50px;
}
.footer{
  position:fixed;
  bottom:0;
  width:100%;
  height:50px;
  text-align: center;
  background-color:#ccc;
}

Answer 3

首先，测量页脚高度。然后将该页脚高度添加为padding-bottom到您的身体。假设您的页脚高度为100px，然后添加以下内容：

body{
  padding-bottom:100px;
}

或者您也可以在页面底部添加空白div，其中包含与页脚高度相同的内容。

Answer 4

我在SB-Admin构建的网站上遇到此问题。我遗漏的一个细节是将粘性页脚放在身体标签上。我也离开了固定导航课程，但我认为这是无关紧要的。在我的body标签上添加粘性页脚后，页脚正常工作。

所以，它应该看起来像：

<body class="sticky-footer">
  <div class="content-wrapper">
      Body content...

    <footer class="sticky-footer">
      Footer content...

    </footer>
  </div>
</body>

粘性页脚涵盖内容

4 个答案: