跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

HTML5里如何让色块在最下面

林译川
林译川
• 👁 0人浏览过
最直接有效的方式是父容器设 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
是更干净的解法——它会把前面所有兄弟元素挤上去，把色块“顶”到最后。 使用场景：卡片、表单页、侧边栏底部固定区域。 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 父容器必须有明确的
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 生效，对块级色块（比如
）完全无效。很多人搜“HTML5 色块底部对齐”，误以为这是解决方案，结果调半天没反应。 典型错误操作： 给
加
vertical-align: bottom
→ 无效果 把色块包进
再加
vertical-align
→ 容易受行高、字体影响，位置飘忽 混用
float
和
vertical-align
→ 布局失控风险高 响应式下保持底部位置别断掉 用
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
）悄悄破坏。

相关文章