最简洁可靠的页面底部贴底方案是Flexbox column布局配合min-height: 100vh：外层容器设display: flex、flex-direction: column、min-height: 100vh，main设flex: 1自动撑开留出底部空间。
让页面底部始终贴底，最简洁可靠的方案就是用 Flexbox 的 column 布局配合 min-height: 100vh，而不是固定高度或 JS 计算。
设置容器为 flex column 并占满视口
给最外层容器（比如 把 这些细节不注意会导致贴底失效或布局错乱： HTML： CSS： 不复杂但容易忽略。 或一个包裹 、 的
display: flexflex-direction: columnmin-height: 100vh（关键：确保至少撑满一屏，内容少时也能贴底）让主体内容自动撑开，留出底部空间
（或中间主要内容区域）设为 flex: 1，它会自动吸收剩余空间，把 “推”到底部：
flex: 1 等价于 flex: 1 1 auto，表示可伸缩、优先占满剩余高度height: 100% 或 margin-top: auto 等副作用大的方式 仍能正常滚动， 保持在内容末尾（非视口底）——这是合理行为避免常见陷阱
min-height: 100vh，仅 height: 100vh 在内容超长时会让 footer 被截断 或 设 height: 100%，可能引发嵌套高度计算异常body 没有默认 margin，否则会出现意外空白viewport meta 标签，否则 100vh 可能被浏览器地址栏影响一个最小可用结构示例
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
