When adding custom HTML, the original width and height are scaled, and a button at the bottom that cannot be changed appears.

问题场景

用户使用 Gradio 构建高度自定义的 HTML 页面（例如响应式布局、左侧导航栏、右侧对话区），通过 gr.Interface 的 outputs=gr.HTML(html_code) 输出 HTML 内容并启动应用。运行后，自定义 HTML 的原始宽高被压缩，原本应占满整个视口的顶部区域明显缩小，页面中还会出现无法修改的默认按钮。

报错原文

When adding custom HTML, the original width and height are scaled, and a button at the bottom that cannot be changed appears.

原因分析

可能原因：gr.Interface 是 Gradio 的高层 API，设计上会在输出区域自动追加 Clear、Generate、Flag 等操作按钮，并对输出内容布局进行统一管理。当用户传入整页自定义 HTML 时，这些默认控件会参与页面排版，导致自定义内容的宽高被重新计算和压缩，同时底部出现无法移除的按钮。Issue 评论中也确认，用户改用 gr.Blocks 后页面布局有所改善，但仍存在部分元素错位，且官方在复现时未拿到 css_code，因此无法完全排除 CSS 权重覆盖造成的影响。

环境排查

• 确认 Gradio 版本：Report 使用 gradio=4.441；官方复测基于 Gradio 6.25.0 和提交 a9ce60ae0。
• 检查自定义 CSS css_code 中是否存在针对 .container、.top、.middle、.bottom 等类的高度、宽度或 position 设置，可能有与 Gradio 内置样式冲突。
• 确认 HTML 内是否有外部图标字体（如 icon-star、icon-exit）或图片资源未正确加载，影响文档流高度计算。

解决步骤

1. 将 gr.Interface 换成 gr.Blocks，并把 gr.HTML 放在 Blocks 上下文中。
2. 参考官方验证通过的代码结构：

   with gr.Blocks() as demo:
       gr.HTML(html_code)
   
   demo.launch(css=css_code)

3. 如果改用 Blocks 后部分元素仍错位，检查自定义 CSS 中是否使用了针对全局选择器（如 body、div）的样式，适当提高选择器优先级或补充 min-height、width: 100%。
4. 若页面中存在 /file=images/profile_default.png 这类路径引用，确认通过 allowed_paths 正确暴露了资源目录。
5. 如果仍然依赖 Interface 的交互逻辑，可考虑用 Blocks 手动构建表单和提交按钮，替代 Interface 默认控件。

验证方法

启动应用后，检查自定义 HTML 顶部区域是否能够占满整个视口高度，页面底部不再出现 Clear、Generate、Flag 等默认按钮；同时确认左侧导航、输入框、按钮等元素位置是否符合原始设计稿。

参考来源

gradio-app/gradio #9816

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。