css基本使用 使用css主要有哪几种布局方式
本文介绍了如何利用CSS网格布局创建一个整个视口的容器。通过设置body和Grid容器的最小高度为100vh，可以保证网格布局充满整个视口的高度，从而实现全屏布局效果。
在使用CSS网格布局时，我们有时需要网格容器能够抬高整个屏幕，从而实现全屏布局。这在创建单页应用、全屏展示页面等情况中非常常见。默认情况下，解决 HTML body 元素的高度只能根据其内容进行调整。因此，即使你设置了 Grid 容器的宽度为 100，它也可能不会充满整个屏幕的高度。
为了这个问题，我们需要同时设置 body 和 Grid 容器的最小高度为 100vh。vh代表单位视口高度（viewport height），100vh 表示关注整个视口的高度。
实现方法：
立即学习“前端免费学习笔记（深入）”；
设置 body 的最小高度：body { min-height： 100vh； margin： 0； /* 删除 body 默认的 margin */}登录后复制
我们需要将 body 的 min-height 设置为 100vh，并且为了避免出现滚动条，通常还需要将 body 默认的 margin 设置为 0。
设置 Grid 容器的最小高度： Suno
最强AI音乐生成器，轻松实现文本转歌曲，媲美真实歌手2844查看详情 .wrapper { display： grid； grid-template-columns： auto auto auto； grid-template-rows： auto auto auto； grid-template-areas： 'a a a' 'a a a' 'b b b'； min-height： 100vh； /* 设置wrapper的最小高度*/}登录后复制
将Grid Container（在示例中为.wrapper）的min-height也设置为 100vh，确保其能够跨越整个视口的高度。
完整示例：lt；!DOCTYPE htmlgt；lt；html lang=quot；enquot；gt；lt；headgt；lt；meta charset=quot；UTF-8quot；gt；lt；meta name=quot；viewportquot；content=quot；width=device-width， initial-scale=1.0quot；gt；lt；titlegt；全屏Gridlt；/titlegt；lt；stylegt；body {min-height：100vh；margin：0；} .wrapper {display：grid；grid-template-columns：auto auto auto；grid-template-rows：auto auto auto；grid-template-areas：'a a a''a a a''b b b'；min-height：100vh；} .first {background-color：grey；grid-area：a；} .second {grid-area：b；background-color：red；} lt；/stylegt；lt；/headgt；lt；bodygt； lt；div class=quot；wrapperquot；gt； lt；div class=quot；firstquot；gt； 123 lt；/divgt； lt；div class=quot；secondquot；gt； 123456 lt；/divgt； lt；/divgt；lt；/bodygt；lt；/htmlgt；登录后复制事项
注意事项：确保在body 和 Grid Container 上都设置了 min-height： 100vh。根据实际需求调整 grid-template-columns、grid-template-rows 和 grid-template-areas 属性。如果页面出现滚动条，检查 body 是否有默认的 margin 或 padding，因此设置为 0。
总结：
通过设置 body 和 Grid Container 的 min-height 为 100vh，可以轻松实现CSS 网格 的全屏布局。这种方法简单有效，适用于各种需要全屏展示的场景。记住去掉body默认的边距，以免出现不必要的滚动条。
以上就是利用 CSS Grid 实现全屏布局的详细，更多请关注乐哥常识网其他相关文章！ 相关标签： css html 浏览器 app red css html margin padding viewport 大家都在看：解决CSS按钮文本与图标图标问题：Flexbox布局实战CSS属性选择器中的“或”逻辑内容：实现多条件匹配的策略实现滚动内容时向上移动的效果：纯CSS解决方案纯CSS实现项目内容滚动覆盖固定背景的视差效果解决CSS中SVG图片字体显示问题的全面指南