如何在MUI中实现侧边栏高度100%显示？

问题分析 #

你遇到的核心问题：

• 用100vh时，页面内容超出视口滚动后，侧边栏高度固定为视口高度，无法跟随页面延伸；
• 用100%时，因父元素高度未正确继承，仅覆盖侧边栏内部列表区域；
• 代码存在拼写错误：postion="fixed"应为position="fixed"，这是导致固定定位未生效的关键问题之一。

解决方案 #

方案1：正确使用固定定位（推荐）

固定定位元素相对于视口定位，设置好位置和高度后，能始终铺满视口，不受页面滚动影响。修改代码如下：

const Sidebar = () => {
  return (
    <Box flex={1}>
      {/* 修正position拼写，设置固定定位铺满视口 */}
      <Box position="fixed" top={0} left={0} height="100vh" sx={{ boxShadow: 3, width: '250px' }}>
        <Box p={4}>
          <Stack
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            direction="column"
            spacing={2}
          >
            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            <Typography>Hi, DEANS</Typography>
          </Stack>
        </Box>
        <List>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#home">
              <ListItemIcon>
                <Home />
              </ListItemIcon>
              <ListItemText primary="Homepage" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemIcon>
                <Article />
              </ListItemIcon>
              <ListItemText primary="Pages" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemIcon>
                <Group />
              </ListItemIcon>
              <ListItemText primary="Groups" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemIcon>
                <Storefront />
              </ListItemIcon>
              <ListItemText primary="Marketplace" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemIcon>
                <Person />
              </ListItemIcon>
              <ListItemText primary="Friends" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemIcon>
                <Settings />
              </ListItemIcon>
              <ListItemText primary="Settings" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemIcon>
                <AccountBox />
              </ListItemIcon>
              <ListItemText primary="Profile" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemIcon>
                <ModeNight />
              </ListItemIcon>
              <Switch onChange={() => {}} />
            </ListItemButton>
          </ListItem>
        </List>
      </Box>
    </Box>
  )
}

export default Sidebar

关键修改点：

• 修复position拼写错误；
• 添加top={0}、left={0}确保侧边栏贴紧视口左上角；
• 设置height="100vh"让侧边栏铺满视口高度；
• 明确设置width避免布局错乱（可根据需求调整宽度值）。

方案2：跟随页面内容滚动的全屏侧边栏

如果希望侧边栏和主内容同步滚动，需确保父容器高度继承正确：

1. 给页面根容器（如App组件）设置：

<Box sx={{ minHeight: '100vh', display: 'flex' }}>
  <Sidebar />
  <Box flex={4}> {/* 主内容区域 */}
    {/* 表格等内容 */}
  </Box>
</Box>

2. 修改Sidebar组件：

const Sidebar = () => {
  return (
    <Box flex={1} sx={{ boxShadow: 3 }}>
      <Box p={4}>
        <Stack
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
          direction="column"
          spacing={2}
        >
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
          <Typography>Hi, DEANS</Typography>
        </Stack>
      </Box>
      <List>
        {/* 列表项内容保持不变 */}
      </List>
    </Box>
  )
}

原理：外层容器用minHeight: '100vh'确保至少铺满视口，display: 'flex'让侧边栏和主内容区域等高，侧边栏的flex:1会自动填充高度，主内容变长时侧边栏同步延伸。

补充说明 #

• 固定定位侧边栏适合需要始终可见的导航场景；
• 跟随滚动的侧边栏适合侧边内容与主内容关联度高的场景；
• 使用100%高度时，必须确保父元素有明确高度值或使用flex布局，否则无法正确继承高度。

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