时间戳

首页 > 解决方案 > 响应式内容满足整个浏览器大小，而不是滚动条

html - 响应式内容满足整个浏览器大小，而不是滚动条

问题描述

示例在图片中。我有 4 个容器在 HTML 中使用 Material UI

<Grid container>
    <Grid item>
       <Finalization />
    </Grid>
    <Grid item>
       <Status/>
    </Grid>
    <Grid item>
       <Notification />
    </Grid>
</Grid>

在我的大屏幕尺寸中，内容没有滚动条并且有很多空白（请看图片）。在我较小尺寸的屏幕中，内容会溢出 y 轴的内容。无论屏幕尺寸如何，如何使其在没有滚动条和空白的情况下满足整个浏览器尺寸？

我一直在网上搜索并测试自己。我尝试使用溢出：隐藏，但内容消失了。我正在考虑使用媒体查询，但在材质 UI 组件中使用它时遇到了麻烦。

更大的屏幕尺寸

更小的屏幕尺寸

标签： htmlcssmaterial-uimedia-queriesuser-experience

解决方案

推荐阅读