底部按钮遮挡内容可通过四步解决：1. 修改Footer定位为relative/absolute并调整bottom值；2. 用Flex容器包裹内容并启用垂直伸缩；3. 鸿蒙平台开启底部安全区避让；4. 为内容区设padding-bottom并用sticky按钮。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
码上飞AI底部按钮遮挡内容怎么办
在码上飞AI平台预览或调试应用时，常出现底部固定按钮（如“发送”“提交”“生成”）压住输入框、列表项或关键操作区域，导致无法点击、文字被截断、滚动异常——这不是浏览器兼容问题，而是默认布局策略未适配内容高度变化。
手动调整底部区域高度与定位方式
进入「预览界面」→ 点击右上角「编辑」图标 → 在左侧组件树中找到名为 【Footer】 或含「bottom」「fixed」类名的容器组件。
在右侧属性面板中，将「定位方式」从 【fixed】 改为 【relative】 或 【absolute】；若选 absolute，必须同时设置其父容器为 position: relative 且有明确 height，否则子元素会脱离文档流造成空白塌陷。
将「底部间距（bottom）」值从 0px 手动改为 16px 或 24px，观察预览区是否恢复可滚动区域；该值过小仍会遮挡，过大则留白过多，建议以最小可触控区域（44px）为基准反推。
用自适应容器包裹内容区（推荐）
方法一：插入「Flex 容器」组件作为内容主包裹层
在组件树顶部拖入一个 Flex 容器 → 将原全部内容组件（含输入框、按钮、列表）整体拖入该容器内 → 在 Flex 容器属性中开启「垂直方向自动伸缩」→ 设置「对齐方式」为 start，「换行」设为 wrap。
方法二：启用「安全区适配」开关（仅鸿蒙/HarmonyOS目标平台有效）
在项目设置 → 平台配置 → 勾选「启用底部安全区避让」→ 此时系统会自动为内容区底部预留约 34px 高度，避免被虚拟导航键或手势条覆盖；【注意：此开关对Web/H5预览无效】。
重写底部按钮CSS样式（高级）
第一步：在「全局样式」或当前页面「自定义CSS」中添加以下代码：
/* 确保按钮不抢占内容空间 */
.footer-btn { position: sticky; bottom: 0; z-index: 100; }
/* 关键：为内容区预留底部内边距 */
.content-wrapper { padding-bottom: 72px; }
第二步：在组件树中，将所有核心内容（非按钮）统一放入一个 class 为 content-wrapper 的容器中；【若未加该class，padding-bottom将不生效】。
第三步：确认 .footer-btn 元素在 DOM 结构中位于 .content-wrapper 之后——顺序错乱会导致 sticky 失效或遮盖更严重。
