页脚没有正确排队

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> 

和IM然后用{% include 'footer.html' %}下</script>和内部</body>在我base.html文件

Answer 1

由于您使用的位置absolute那么你必须设置left: 0跨越全页宽

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