用 flex flex-col min-h-screen 布局容器，主内容区设 flex-1 overflow-y-auto，按钮置于容器最底部；避免 fixed bottom-0，改用 sticky bottom-0 + relative 容器，并预留 mb-24 安全间距，适配键盘弹出与安全区。

底部按钮始终贴底，但内容不被遮挡

用 Tailwind 实现固定底部按钮，核心不是简单加 fixed 或 sticky，而是要让按钮「视觉上固定在视口底部」，同时确保主内容可滚动、不被遮盖。直接套 fixed bottom-0 很容易导致内容被按钮盖住，尤其在小屏或键盘弹出时。

• 优先用 flex flex-col min-h-screen 布局容器，让页面至少撑满视口高度
• 主内容区域用 flex-1 overflow-y-auto，既占剩余空间又支持滚动
• 按钮放容器最外层底部，不嵌套在内容区里——否则会被 flex-1 挤走或覆盖
• 避免对按钮本身设 z-index，除非它真要叠在其他浮层上；多数场景不需要

移动端键盘弹出时按钮被顶起或消失

iOS Safari 和部分安卓浏览器在输入框聚焦时会收缩视口高度，导致 fixed bottom-0 按钮被“顶出”可视区，甚至完全看不见。这不是 Tailwind 的问题，而是 viewport 行为变化引发的布局偏移。

• 不要依赖 vh 单位（比如 h-[90vh]）做高度控制，键盘弹出时 100vh 会变小，造成内容截断
• 改用 min-h-screen + flex flex-col 组合，比纯 vh 更稳定
• 如必须响应键盘，可监听 resize 事件，动态调整按钮 bottom 值，但开销大、兼容性差，一般不推荐
• 更稳妥的做法：把按钮放在表单底部，随内容滚动到底部再出现（即用 sticky bottom-0 + 容器 relative），而非全局固定

按钮和内容之间留出安全间距

固定按钮如果紧贴内容底部，滚动到末尾时文字可能被按钮半遮，尤其在 iOS 上有默认内边距或字体渲染差异时。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给主内容区最后一块元素加 mb-24（或对应按钮高度 + 额外余量），而不是靠按钮的 pb
• 按钮自身用 pb-6 或 py-4 控制内边距，外边距由内容区承担，逻辑更清晰
• 若按钮含图标+文字，建议最小高度设 min-h-[60px]，避免压缩变形
• 注意 safe-area-inset-bottom：在 iPhone X 及后续机型上，用 pb-safe（需开启 Tailwind 的 safeArea 插件）或手动加 pb-[env(safe-area-inset-bottom)]

多个按钮并排时水平对齐失效

当底部需要两个及以上按钮（如“取消”“确认”），直接套 flex justify-between 可能在窄屏上换行或挤压，且左右按钮离边缘距离不一致。

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

• 用 flex gap-3 替代 justify-between，保证按钮间等距，两端留白自然
• 按钮统一设 flex-1 min-w-[120px]，避免小屏下过窄或文字溢出
• 避免对单个按钮设 w-1/2，不同按钮文字长度不一时会导致宽度失衡
• 如有禁用态，记得同步更新 opacity-50 cursor-not-allowed，否则视觉与交互不一致

Tailwind 的类名组合很灵活，但固定底部按钮的关键不在“怎么写类”，而在“在哪写”——按钮的位置层级、容器的高度约束、以及是否考虑了输入法弹窗这类真实交互场景。很多看似样式问题，其实是 DOM 结构和 viewport 策略没对齐。