html - 页脚未正确对齐

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> 下和里面</body>在我的 base.html 中

Answer 1

由于您使用的是 absolute 位置，因此您必须设置 left: 0 以跨越页面的整个宽度

.footer {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   ...
}