底部固定菜单栏不能只靠 position: fixed 是因为会遮挡内容、iOS软键盘弹出时错位，且 justify-content: space-around 在无宽度约束的 fixed 容器中表现异常；应采用 flex 布局：根容器设 display: flex; flex-direction: column; min-height: 100vh; 主体用 flex: 1; 底部菜单显式设 height 并用 flex + space-around。
底部固定菜单栏为什么不能只靠 position: fixed
直接用 position: fixed; bottom: 0; 确实能把菜单“钉”在底部，但问题立刻出现：内容区域会被菜单遮挡，尤其在 iOS Safari 中软键盘弹出时，fixed 元素常失效或错位；另外，菜单项平均分布（space-around）需要父容器有明确宽度和 flex 上下文，而 fixed 容器默认不参与文档流，justify-content: space-around 在无宽度约束时可能表现异常。
display: flex + flex-direction: column 是更可控的布局基底
把整个页面当作一个垂直 flex 容器，让「主体内容」自动撑开剩余高度，「底部菜单」固定高度并置于底部——这样既避开 fixed 的兼容性陷阱，又保留 flex 布局的弹性控制能力。
关键点：
- 根容器（如
或包裹层）设为display: flex; flex-direction: column; min-height: 100vh; - 主体内容区域用
flex: 1;占满可用空间，避免被菜单挤压 - 底部菜单容器设
display: flex; justify-content: space-around;，且必须指定height或min-height（否则space-around缺少参考基准） - 菜单项建议用
flex: 0 0 auto;防止被压缩，文字用text-align: center;对齐
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
<p>.main { flex: 1; }</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="overflowclass">CSS工具箱(专业版)</a>
<p class="overflowclass">全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>.footer-menu {
height: 60px; /<em> 必须显式设定高度 </em>/
display: flex;
justify-content: space-around;
align-items: center;
background: #fff;
border-top: 1px solid #eee;
}</p><p>.footer-menu a {
flex: 0 0 auto;
text-align: center;
font-size: 12px;
}
</p>
移动端适配要注意的三个细节
Flex 布局在 Android 和 iOS 上基本一致，但以下行为容易被忽略：
-
min-height: 100vh在 iOS Safari 中可能取的是「视觉视口」高度，导致底部菜单上浮——改用min-height: -webkit-fill-available;更可靠 - 菜单项图标+文字组合时，
space-around可能让首尾留白过大；可改用justify-content: space-between;并给首尾项加空占位 - 部分安卓 WebView 对
flex: 1支持不稳定，建议同时加flex-basis: 0;（即写成flex: 1 1 0;）
要不要加 position: sticky？
如果菜单需「随内容滚动到最底端才吸附」，而不是始终固定，position: sticky; bottom: 0; 是更语义化的选择。但它要求父容器有高度限制（比如 max-height: 100vh;），且 sticky 在旧版 Android WebView 中支持差。实际项目中，真要滚动吸附就用 JS 监听 scroll + getBoundingClientRect() 判断位置更稳妥，别强求纯 CSS。
flex 布局下的底部菜单，核心矛盾从来不是“怎么贴到底部”，而是“怎么不让它干扰内容、不被键盘顶飞、不因设备差异错位”——这些都得靠容器约束和高度显式声明来兜底，space-around 只是其中一环，不是银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
