最简洁可靠的页面底部贴底方案是Flexbox column布局配合min-height: 100vh：外层容器设display: flex、flex-direction: column、min-height: 100vh，main设flex: 1自动撑开留出底部空间。

让页面底部始终贴底，最简洁可靠的方案就是用 Flexbox 的 column 布局配合 min-height: 100vh，而不是固定高度或 JS 计算。

设置容器为 flex column 并占满视口

给最外层容器（比如 或一个包裹 <header></header>、<main></main>、<footer></footer> 的 <div class="app">）设置： <ul> <li><code>display: flex

flex-direction: column

min-height: 100vh（关键：确保至少撑满一屏，内容少时也能贴底）

让主体内容自动撑开，留出底部空间

把 <main></main>（或中间主要内容区域）设为 flex: 1，它会自动吸收剩余空间，把 <footer></footer> “推”到底部：

• flex: 1 等价于 flex: 1 1 auto，表示可伸缩、优先占满剩余高度
• 不需要写 height: 100% 或 margin-top: auto 等副作用大的方式
• 即使内容超出一屏，<main></main> 仍能正常滚动，<footer></footer> 保持在内容末尾（非视口底）——这是合理行为

避免常见陷阱

这些细节不注意会导致贴底失效或布局错乱：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

• 父容器必须有明确的 min-height: 100vh，仅 height: 100vh 在内容超长时会让 footer 被截断
• 不要给 或 设 height: 100%，可能引发嵌套高度计算异常
• 如果用了 CSS Reset，确认 body 没有默认 margin，否则会出现意外空白
• 移动端需加 viewport meta 标签，否则 100vh 可能被浏览器地址栏影响

一个最小可用结构示例

HTML：

<div class="app">
  <header>页头</header>
  <main>主要内容</main>
  <footer>页脚</footer>
</div>

CSS：

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

不复杂但容易忽略。