我正在开发一个网络应用程序,应该填充显示器的
100vh
和 100vw
。
应用程序本身不应垂直或水平滚动,但应用程序内的各个组件/div 允许滚动。
在全局CSS上,我定义了以下内容
body {
background: none !important;
margin: 0;
user-select: none;
height: 100vh !important;
width: 100vw !important;
overflow: hidden !important;
}
我在 React 项目中使用 Mantine 作为我的组件库。
用户可以输入搜索查询,它将返回搜索结果列表。
我正在使用Stack来显示结果。
如果搜索结果列表大到足以溢出父容器的高度,我希望 Stack 能够垂直滚动,以便用户查看剩余的搜索结果。
return (
<div>
<Grid p={8} gutter="lg">
<Grid.Col span={4}>
<TextInput
placeholder="Search"
label="Profile Search"
icon={<IconSearch size={14} />}
size="lg"
/>
<Space h="lg" />
<Stack sx={
(theme) => (
{
overflowY: "auto",
}
)}>
{/* repeated list of search results from query */}
<SearchResult ... />
</Stack>
</Grid.Col>
</Grid>
)
我尝试将堆栈包装在ScrollArea中,但是只有当我将高度定义为固定值时,这才有效。
<ScrollArea style={{ height: 500 }}>
<Stack sx={ ... }>
...
</Stack>
</ScrollArea>
但这并没有给出我想要的行为,因为我希望结果能够响应并填充父级的高度,然后溢出其余部分。
例如,如果我将高度设置为 100%,堆栈将溢出父级,并且滚动永远不会出现。
<ScrollArea style={{ height: "100%" }}>
<Stack sx={ ... }>
...
</Stack>
</ScrollArea>
如何使用 Mantine 组件正确显示搜索结果列表,直到达到父级的最大高度,然后溢出?
您可以尝试这个以获得响应高度。
<ScrollArea.Autosize maxHeight={500}>
Mantine 文档: