本文详解如何利用 Django 模板继承机制，在 base.html 中统一定义页脚，并确保其自然位于页面内容末尾（非悬浮覆盖），避免 position: absolute 导致的遮挡与滚动错位问题。
本文详解如何利用 django 模板继承机制，在 `base.html` 中统一定义页脚，并确保其自然位于页面内容末尾（非悬浮覆盖），避免 `position: absolute` 导致的遮挡与滚动错位问题。
在 Django 项目中，通过模板继承实现页脚复用是标准且高效的实践。但许多初学者误用 CSS 的 position: absolute; bottom: 0，导致页脚脱离文档流——它不再“跟随内容”，而是相对于视口绝对定位，结果就是页脚悬浮覆盖正文、随滚动上移，完全违背“置于页面最底部”的设计意图。
正确的做法是：将页脚作为普通文档流元素，放在主体内容之后，并通过模板继承机制统一管理。
✅ 推荐结构：语义化 + 可继承 + 响应式就绪
首先，在项目模板根目录（如 templates/base.html）中定义基础布局：
<!-- templates/base.html -->
<meta charset="UTF-8"><title>{% block title %}我的网站{% endblock %}</title>
{% block extra_css %}{% endblock %}
{% block header %}
<header class="site-header"><h1>我的网站</h1>
<!-- 导航栏等共用头部 -->
</header>
{% endblock header %}
<main class="site-main">
{% block content %}
{# 子模板在此填充核心页面内容 #}
{% endblock content %}
</main>
{% block footer %}
<footer class="site-footer"><p>© {% now "Y" %} 我的在线教育平台. 保留所有权利。</p>
<p>联系我们：support@eduline.com</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2691" title="Django"><img
src="https://img.php.cn/upload/skill/000/000/081/178928291071323.jpg" alt="Django" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill2691" title="Django" class="overflowclass">Django</a>
<p class="overflowclass">避免常见的 Django 错误——QuerySet 评估、N+1 查询、迁移冲突和 ORM 陷阱。</p>
</div>
<a rel="nofollow" href="/xiazai/skill2691" title="Django" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</footer>
{% endblock footer %}
{% block extra_js %}{% endblock %}
? 关键点：
- 页脚
- 使用 {% block footer %} 预留可定制区域，子模板可选择性重写（如添加备案号、多语言链接）；
- 所有子模板只需继承并填充 content（或 footer），无需重复书写页脚 HTML。
接着，任一子模板（如 courses/index.html）只需这样写：
<!-- courses/index.html -->
{% extends 'base.html' %}
{% block title %}课程列表 - 在线教育平台{% endblock %}
{% block content %}
<h2>热门课程</h2>
- Python 全栈开发
- Django 高级实战
- 前端工程化入门
⚠️ 注意事项与最佳实践
- {% extends %} 必须是子模板的第一行，否则 Django 会抛出 TemplateSyntaxError；
- 不要在子模板中重复定义未被 block 包裹的全局结构（如 ），否则将破坏继承逻辑；
- 若需实现“粘性页脚”（即内容不足时页脚仍沉底），推荐使用 Flexbox 布局而非 absolute：
/* 在 base.html 的 <style> 或 CSS 文件中 */ html, body { height: 100%; } body { display: flex; flex-direction: column; } .site-main { flex: 1; } .site-footer { margin-top: auto; /* 推向底部 */ }</style> - 避免在 block 外直接写 HTML 内容（如你原例中的
