页脚没有正确排队

Question

由于某些原因，我的页脚似乎没有与整页正确排列。

我确实在一个包含类的网站的主体，所以我的页脚的底部确实与网站的主体对齐。然而，因为它占据了屏幕的100％，所以现在将网站向右推动的数量与从左侧推开的数量相同。我希望这是有道理的。我把我的页脚放在div类之外，但它似乎仍然表现得好像在里面。另一方面，我的导航栏似乎可以完美地占据整个屏幕。任何想法我很困惑。

这是我的页脚代码

{% load staticfiles %}

<style>
{% block style %}
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


{% endblock %}
</style>

<footer class="footer" >
      <div class="container-fluid">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
</footer>

然后即时使用{% include 'footer.html' %}下的</script>和我的base.html中的</body>内

Answer 1

由于您使用的是位置footer { background: #fff none repeat scroll 0 0; color: #ffffff; float: left; padding: 30px 0; width: 100%; } ，因此您必须将absolute设置为跨越页面的整个宽度

left: 0