最直接兼容的做法是父容器设 position: relative，子 div 用 position: absolute; bottom: 0; left: 0; right: 0；若需视口底部固定则用 position: fixed；flex 布局适用父容器高度明确且需语义化沉底场景。
用 position: absolute 把 div 钉在父容器底部
这是最直接、兼容性最好（IE8+）的做法，前提是父容器有明确高度或已定位（position: relative 或更高级定位）。否则 absolute 会相对于整个页面定位，容易偏移。
- 父容器必须设置
position: relative（或absolute/fixed），否则子元素的bottom: 0会往上找最近的定位祖先，可能跑到 body 底部去 - 子
div加上position: absolute; bottom: 0; left: 0; right: 0;，就能贴底铺满宽度 - 如果父容器高度不固定（比如内容撑开），但又想让它始终停在“可视区底部”，就得换思路——
position: fixed更合适
用 position: fixed 固定在视口最下方
适合悬浮按钮、全局通知栏这类不随滚动消失的元素。它脱离文档流，直接相对于浏览器窗口定位。
- 加
position: fixed; bottom: 0; left: 0; width: 100%;即可 - 注意：页面有 footer 且希望它“在内容之后”而非“盖在内容上”，就别用
fixed，否则会遮挡内容 - 移动端需留意
viewport缩放或软键盘弹出时，fixed元素可能错位（Safari 尤其明显）
用 Flex 布局让 div 沉到容器末尾
当父容器是 Flex 容器，且你希望子元素按内容顺序排列、最后一个自动占满剩余空间并沉底时，这个方法最语义清晰。
- 父容器设
display: flex; flex-direction: column; height: 100vh;（或具体高度） - 目标
div加margin-top: auto;，它就会被“推”到底部 - 注意：父容器必须有明确高度，否则
flex无法计算剩余空间；100vh在 iOS Safari 中可能因地址栏缩放失效 - 不兼容 IE9 及以下（但 IE10+ 支持
flex）
为什么 vertical-align: bottom 不起作用
vertical-align 只对 inline-level 元素（如 img、span）和 table-cell 生效，对块级 div 完全无效。很多人卡在这里反复试，其实是用错了属性。
立即学习“前端免费学习笔记（深入）”；
- 看到
vertical-align不生效，第一反应不是调参数，而是确认元素是否处于支持它的上下文（比如是否套在display: table-cell里） - 强行给
div设display: inline-block再用vertical-align，虽然能动，但会引入行内布局的换行、空白符等副作用，得不偿失 - 真正要控制块级元素垂直位置，优先考虑
position、flex或grid
absolute 找不到定位祖先，flex 算不出剩余空间，fixed 在滚动场景下行为反直觉。选哪个方案，先看“它该跟着内容走，还是跟着屏幕走，还是跟着父容器走”。 
