HTML5里如何让色块在最下面

最直接有效的方式是父容器设 position: relative，色块设 position: absolute 和 bottom: 0；flex 布局下推荐用 flex-direction: column + margin-top: auto；vertical-align 对块级色块无效。

用 position: absolute 把色块钉在容器底边

最直接有效的方式是给色块加 position: absolute，再配合 bottom: 0。但前提是它的父容器得是 position: relative（或 absolute/fixed），否则 bottom: 0 会相对于整个视口定位，而不是你想要的“在父容器最下面”。

常见错误现象：bottom: 0 没生效、色块飞到页面底部、多个色块堆叠错位。

• 父容器必须设置 position: relative（哪怕只是占个位）
• 色块本身需设 width（否则可能收缩成内容宽）
• 如果父容器高度不固定，且希望色块始终贴底（即使内容少），这个方案依然可靠

Flex 布局里用 margin-top: auto 推到底部

当父容器是 display: flex 且主轴为垂直方向（flex-direction: column）时，给色块加 margin-top: auto 是更干净的解法——它会把前面所有兄弟元素挤上去，把色块“顶”到最后。

使用场景：卡片、表单页、侧边栏底部固定区域。

立即学习“前端免费学习笔记（深入）”；

• 父容器必须有明确的 flex-direction: column
• 色块不能设 flex: 0 0 auto 以外的弹性属性（否则 margin-top: auto 可能被忽略）
• 兼容性好（chrome 21+/firefox 20+/safari 6.1+），但 IE10 需要 -ms-flex 前缀

避免踩 vertical-align 的坑

vertical-align 只对 inline 元素和 table-cell 生效，对块级色块（比如 <div>）完全无效。很多人搜“html5 色块底部对齐”，误以为这是解决方案，结果调半天没反应。 <p>典型错误操作：</p> <ul><li>给 <code><div class="color-block"> 加 <code>vertical-align: bottom → 无效果

响应式下保持底部位置别断掉

用 position: absolute 时，如果父容器高度随屏幕变小而塌缩（比如媒体查询里改了 min-height），色块可能被截断或溢出。Flex 方案此时更稳，但也要注意父容器是否设置了 min-height 或 height。

• 绝对定位方案：给父容器加 min-height: 100vh（慎用，可能造成滚动条多余）
• Flex 方案：父容器设 min-height: 100vh + flex-direction: column，色块用 margin-top: auto，最稳妥
• 不要依赖 vh 单位做色块高度（ios Safari 中 100vh 会包含地址栏，导致计算偏差）

实际项目里最容易被忽略的是父容器的定位上下文或 flex 上下文是否真正建立——不是写了 relative 或 flex 就一定生效，得看它有没有被其他样式（比如 display: contents、transform）悄悄破坏。