100vh适配问题：内容超出浏览器窗口，使用Material-UI如何实现无滚动条适配？

• 基础样式重置
  首先使用MUI内置的CssBaseline组件清除浏览器默认样式，它会自动移除body的默认margin、统一各浏览器的基础样式。同时需要配置根节点的全局样式：

  html, body, #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  

  你也可以直接用MUI的GlobalStyles组件插入这段样式，不需要额外引入独立CSS文件。
• 外层容器用视口单位固定尺寸
  给页面最外层容器（推荐使用MUI的Box组件）直接设置占满视口的尺寸，不受父元素尺寸影响：

  import { Box } from '@mui/material';
  
  function App() {
    return (
      <Box sx={{ width: '100vw', height: '100vh', overflow: 'hidden' }}>
        {/* 此处放入你的页面内容 */}
      </Box>
    )
  }
  

  其中100vw对应浏览器视口全宽，100vh对应浏览器视口全高，可直接铺满整个窗口。
• Grid布局溢出修复
  如果你使用的Grid配置了spacing属性，需要注意最外层Grid容器不要额外添加margin，同时给父容器增加box-sizing: border-box配置，避免内边距、边框撑大容器尺寸：

  <Box sx={{ boxSizing: 'border-box', width: '100%', height: '100%' }}>
    <Grid container spacing={2} sx={{ margin: 0, width: '100%', height: '100%' }}>
      {/* 此处放入Grid子项 */}
    </Grid>
  </Box>
  

  同时注意所有Grid子项的尺寸加总不要超过100%，避免内容溢出触发滚动条。
• 多浏览器滚动条强制隐藏兼容
  如果部分浏览器仍然显示滚动条，可追加以下样式强制隐藏，兼容Chrome、Safari、Firefox、IE等主流浏览器：

  ::-webkit-scrollbar {
    display: none;
  }
  body {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  

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