如何让Radix UI ScrollArea以百分比设置高度并填充剩余空间

百分比高度生效的核心前提是父级元素必须有明确的高度值，你的代码仅给外层div和Viewport设置了h-full，但ScrollArea的Root本身没有高度约束，导致它被表格内容撑开，进而出现溢出问题。按以下步骤修改即可解决：

1. 打通全局高度传递链 #

如果组件直接挂载到页面根节点，先给全局层级的元素设置100%高度，确保高度能从顶层传递到组件：

/* 全局样式或组件内的内嵌样式 */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 给ScrollArea Root添加高度约束 #

给ScrollAreaPrimitive.Root加上h-full继承父容器高度，同时设置relative定位（Radix ScrollArea需要相对定位来放置滚动条）：

<ScrollAreaPrimitive.Root className="h-full relative">

3. 明确Viewport的尺寸规则 #

Viewport需要完全占满Root的高度，保持h-full的同时补充w-full确保宽度适配，让内容超出时触发滚动：

<ScrollAreaPrimitive.Viewport className="h-full w-full">

4. 处理表格横向溢出（可选） #

如果表格列宽超出容器，给Table.Root加上overflow-x-auto，避免横向内容溢出页面：

<Table.Root className="w-full overflow-x-auto">

修改后的完整代码 #

import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { Table } from "@radix-ui/themes"

const TableScrollArea = () => {
    // 简化数组生成逻辑
    const dataArray = Array.from({length: 1000}, () => ({
        name: 'AAA',
        email: 'AAA',
        title: 'AAA',
    }));

    return (
        <div className='h-full'>
            <ScrollAreaPrimitive.Root className="h-full relative">
                <ScrollAreaPrimitive.Viewport className="h-full w-full">
                    <Table.Root className="w-full overflow-x-auto">
                        <Table.Header>
                            <Table.Row>
                                <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
                                <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
                                <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
                            </Table.Row>
                        </Table.Header>
                        <Table.Body>
                            {dataArray.map((person, index) => (
                                <Table.Row key={index}>
                                    <Table.RowHeaderCell>{person.name}</Table.RowHeaderCell>
                                    <Table.Cell>{person.email}</Table.Cell>
                                    <Table.Cell>{person.title}</Table.Cell>
                                </Table.Row>
                            ))}
                        </Table.Body>
                    </Table.Root>
                </ScrollAreaPrimitive.Viewport>
                <ScrollAreaPrimitive.Scrollbar orientation="vertical">
                    <ScrollAreaPrimitive.Thumb />
                </ScrollAreaPrimitive.Scrollbar>
            </ScrollAreaPrimitive.Root>
        </div>
    )
};

export default TableScrollArea

补充：页面有顶部固定元素的场景 #

如果页面存在导航栏这类固定高度元素，想要ScrollArea填充剩余空间，建议用flex布局替代百分比：

• 最外层容器设置display: flex; flex-direction: column; min-height: 100vh
• 导航栏设固定高度，ScrollArea所在容器设置flex: 1，自动填充剩余空间，这种方式比百分比更稳定。

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