html结构中应给外层包裹div（如page-wrapper）加flex相关样式，而非直接作用于body，以避免浏览器兼容性问题和样式冲突。
flexbox实现底部固定时，为什么页面内容短了会悬浮？
因为 flex 容器默认不撑满视口高度，子元素又没设置最小高度，整个布局就“塌”了。浏览器只按内容高度渲染，footer 自然跟着内容往下掉，不是真“固定”，只是刚好在末尾。
关键不是给 footer 加 position: fixed，而是让容器（比如 body 或外层 div）成为 flex 主轴方向为 column 的弹性盒子，并强制它占满 viewport 高度。
- 给根容器加
display: flex和flex-direction: column - 必须设
min-height: 100vh（不是height: 100vh，否则内容超长时会出滚动条截断） - 主内容区用
flex: 1占满剩余空间，把footer“顶”到底部
HTML结构里哪个元素该加flex相关样式？
不能直接在 body 上加 display: flex——某些浏览器（如旧版 Safari）对 body 的 flex 支持不稳定，且容易和第三方脚本、重置样式冲突。更稳妥的是包一层 div，比如叫 app 或 page-wrapper。
示例结构：
<div class="page-wrapper">
<header>...</header><main>...</main><footer>© 2024</footer>
</div>
-
.page-wrapper加display: flex、flex-direction: column、min-height: 100vh -
main加flex: 1（等价于flex: 1 1 auto） -
footer不需要额外定位，也不用设margin-top: auto——那属于“备用方案”，有兼容性风险
IE11下flex: 1不生效怎么办？
IE11 对 flex: 1 解析有问题，尤其当父容器是 flex-direction: column 时，子项的伸缩行为经常失效。这不是 bug 是设计限制，得换写法。
- 改用显式声明：
flex: 1 1 0（第三个值设为0，避免 IE 计算基准尺寸出错） - 或者退一步，给
main加flex-grow: 1和flex-shrink: 1，并确保flex-basis是数值（如0px） - 如果项目必须支持 IE11，建议加个兜底：给
main设min-height: calc(100vh - 60px)（60px 是 header + footer 总高估算值），再配合 flex 作为增强
移动端键盘弹出后底部版权栏被顶起怎么修？
这是 iOS Safari 的经典问题：软键盘唤起时，vh 单位会按“可视区域”动态缩放，导致 min-height: 100vh 突然变小，footer 就往上跳。Android Chrome 也有类似表现，但程度轻些。
- 不要依赖
vh做布局高度基准；改用 JavaScript 动态监听resize或focusin，计算真实可用高度并写入自定义 CSS 变量 - 简单方案：给
.page-wrapper改用min-height: 100dvh（dvh是动态视口单位，Safari 16.4+ 支持） - 更保守做法：放弃“绝对贴底”，允许
footer在内容足够时自然流式到底，只在内容不足时才撑开——这反而更符合移动端交互直觉
最麻烦的不是代码怎么写，是得同时考虑视口变化、输入法生命周期、以及不同机型对 vh 的解释差异。真要稳，就得接受“底部版权栏不总在物理屏幕最底下”这个事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
