Gradio DataFrame高度动态变化：如何设置固定高度？

你遇到的问题是Gradio DataFrame的height属性仅控制初始高度，当内容行数超出后组件会自动扩展高度。要彻底固定高度并让内部内容滚动，需要结合自定义CSS实现：

解决步骤 #

1. 给DataFrame组件添加自定义CSS类名
2. 通过CSS强制设置容器的最大高度，并开启垂直滚动

修改后的代码示例 #

方式1：使用gr.Blocks结构（推荐） #

import gradio as gr

with gr.Blocks(css=".fixed-height-df .dataframe-container { max-height: 400px !important; overflow-y: auto !important; }") as demo:
    dataframe_output = gr.DataFrame(
        label="Results Dataframe",
        headers=["Image Path"],
        wrap=True,
        interactive=False,
        type="array",
        css_classes=["fixed-height-df"]  # 添加自定义类
    )
    # 此处添加你的其他组件和业务逻辑

demo.launch()

方式2：使用gr.Interface结构 #

import gradio as gr

def your_data_function():
    # 替换为你的数据返回逻辑
    return [["image_path_1"], ["image_path_2"], ["image_path_3"]]

# 自定义CSS规则
css = ".fixed-height-df .dataframe-container { max-height: 400px !important; overflow-y: auto !important; }"

demo = gr.Interface(
    fn=your_data_function,
    inputs=None,
    outputs=gr.DataFrame(
        label="Results Dataframe",
        headers=["Image Path"],
        wrap=True,
        interactive=False,
        type="array",
        css_classes=["fixed-height-df"]
    ),
    css=css
)

demo.launch()

原理说明 #

• max-height: 400px强制容器高度不超过设定值
• overflow-y: auto让内容超出时自动显示垂直滚动条
• !important用来覆盖Gradio默认的样式优先级，确保自定义规则生效

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