如何用CSS调整Gradio ChatInterface组件高度？遇参数报错及CSS无效

为什么直接传height参数会报错 #

gr.ChatInterface本身并没有height这个初始化参数，它的对话展示区域是由内部的gr.Chatbot组件实现的，直接传height自然会触发TypeError。

两种可行的实现方式 #

方式一：传入自定义配置的Chatbot组件（推荐）

直接创建一个设置了height的gr.Chatbot实例，通过ChatInterface的chatbot参数传入，这是最直接且不易受版本影响的方法：

import gradio as gr

def chat_response(message, history):
    return f"收到消息：{message}"

# 自定义Chatbot，设置目标高度
custom_chatbot = gr.Chatbot(height=600)

demo = gr.ChatInterface(
    fn=chat_response,
    chatbot=custom_chatbot
)

demo.launch()

方式二：用自定义CSS强制修改高度

如果你的CSS之前不生效，大概率是选择器不对或优先级不足，试试以下配置：

import gradio as gr

def chat_response(message, history):
    return f"收到消息：{message}"

demo = gr.ChatInterface(
    fn=chat_response,
    css="""
    /* 针对Chatbot容器设置高度 */
    .chatbot {
        height: 600px !important;
    }
    /* 若需要单独调整对话内容的滚动区域高度 */
    .chatbot .scroll {
        height: 550px !important;
    }
    """
)

demo.launch()

CSS不生效的常见排查点 #

• 选择器错误：Gradio的组件类名可能随版本更新变化，按F12打开浏览器开发者工具，直接查看Chatbot元素的类名，调整选择器。
• 优先级不足：Gradio默认样式的优先级可能高于自定义CSS，加上!important可以强制覆盖。
• CSS加载位置错误：确保css参数是传入到ChatInterface或外层gr.Blocks实例中，不要放在其他无关组件上。

内容的提问来源于stack exchange，提问作者SHDDSFFDSDSAF