MUI布局问题：未知头部高度时，如何实现剩余视口高度滚动容器

你可以通过Flex布局的正确配置解决这个问题，不需要预先知晓头部高度，具体调整方案如下：

1. 给父容器设置display: flex和flexDirection: column，让子元素垂直排列
2. 头部容器不设置固定高度，让它自适应内容高度
3. 下方滚动容器设置flex: 1和overflow: auto，使其自动占据父容器剩余空间，内容超出时自动滚动

修改后的代码示例：

<Box sx={{ height: "98vh", display: 'flex', flexDirection: 'column' }}>
  {/* 头部：自适应内容高度 */}
  <Box sx={{ width: '100%', backgroundColor: '#aabbbb' }}>
    APPBAR（可放置任意内容，高度随内容自动调整）
  </Box>
  {/* 下方滚动容器：自动占剩余视口高度 */}
  <Box
    sx={{
      width: '100%',
      flex: 1,
      overflow: 'auto'
    }}
  >
    <Card sx={{ height: '2000px', backgroundColor: 'lightgreen' }}>
      <CardContent>LIST</CardContent>
    </Card>
  </Box>
</Box>

关键属性说明 #

• flex: 1：等价于flex-grow: 1，让该容器在父容器的剩余空间中自动拉伸，占满所有可用高度
• overflow: auto：当容器内内容高度超过自身高度时，自动显示滚动条
• 父容器的flexDirection: column保证子元素垂直排列，配合height: 98vh限定整体高度为视口高度的98%

无论头部内容如何变化，高度自适应后，下方容器都会自动占据剩余视口高度，且内容超出时正常滚动。

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