如何通过Django模板继承实现页面底部固定页脚？

问题原因 #

你使用的position: absolute会让页脚脱离文档流，默认相对于视口固定在底部。当页面内容超过视口高度时，页脚会覆盖主体内容；滚动页面时，页脚会跟随视口移动，而非停在页面底部。

推荐解决方案：Flexbox粘性页脚 #

这是目前最简洁可靠的实现方式，无需计算元素高度，适配各种内容场景：

1. 调整layout.html结构 #

确保页面根元素作为flex容器：

<!DOCTYPE html>
<html>
<head>
    <!-- 你的meta标签、CSS引用等内容 -->
</head>
<body>
    {% block body %}{% endblock %}
    <div class="test_footer">Footer Test</div>
</body>
</html>

2. 更新CSS样式 #

/* 重置默认边距，确保容器占满视口高度 */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.test_footer {
    width: 100%;
    background-color: var(--primary-colour);
    padding: 20px; 
    box-sizing: border-box;
    /* 关键属性：自动将页脚推到容器底部 */
    margin-top: auto;
}

效果说明 #

• 页面内容不足视口高度时，页脚固定在浏览器窗口底部
• 页面内容超过视口高度时，页脚跟随内容移动到页面最底部，不会覆盖主体内容
• 滚动页面时，页脚正常跟随页面滚动，无移位覆盖问题

备选方案：Calc计算高度（兼容旧浏览器） #

若需兼容不支持Flexbox的旧环境，可采用此方式（需提前确定页脚固定高度）：

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* 给主体内容容器设置最小高度，预留页脚空间 */
.main-content {
    min-height: calc(100vh - 60px); /* 60px为页脚总高度（含padding） */
    padding-bottom: 20px; /* 防止内容被页脚遮挡 */
}

.test_footer {
    width: 100%;
    background-color: var(--primary-colour);
    padding: 20px; 
    box-sizing: border-box;
    height: 60px; /* 固定页脚高度，需与calc中的数值对应 */
}

内容的提问来源于stack exchange，提问作者RoyKeane94