时间：2023-09-26 18:12:01 | 来源：网站运营
时间：2023-09-26 18:12:01 来源：网站运营
【不一样的CSS】实现全屏布局的 3 种方式：若彼岸繁华落尽，谁陪我看落日流年
在线咨询
body { margin: 0;}body,html,.container { height: 100vh; box-sizing: border-box; text-align: center; overflow: hidden;}.content { background-color: #52c41a; /* * 中间部门的布局可以参考 两列 三列 布局 */ display: grid; grid-template-columns: auto 1fr;}.left { width: 240px; background-color: #52c41a; font-size: 80px; line-height: calc(100vh - 200px);}.right { background-color: #f759ab; font-size: 60px;}.header { height: 100px; background-color: #70a1ff;}.footer { height: 100px; background-color: #ff7a45;}.header,.footer { line-height: 100px; font-size: 52px;}HTML 结构如下：<div class="container"> <div class="header">header</div> <div class="content"> <div class="left">导航</div> <div class="right"> <div class="right-in">自适应，超出高度出现滚动条</div> </div> </div> <div class="footer">footer</div></div>关于中间的三列布局可以参考 overflow: auto 即出现滚动条的时候出现滚动条。.content { overflow: hidden; /* 通过 calc 计算容器的高度 */ height: calc(100vh - 200px);}.left { height: 100%;}.right { /* 如果超出出现滚动条 */ overflow: auto; height: 100%;}.right-in { /* 假设容器内有500px的元素 */ height: 500px;}.container { /* 开启flex布局 */ display: flex; /* 将子元素布局方向修改为垂直排列 */ flex-flow: column;}.content { /* 如果超出出现滚动条 */ overflow: auto; /* 设置 中间 部分自适应 */ flex: 1;}.right-in { /* 假设容器内有500px的元素 */ height: 500px;}关于 Flex 布局的详细用法请参考
template 属性即可实现，示例代码如下：.container { /* 开启grid布局 */ display: grid; grid-template-rows: auto 1fr auto;}.content { /* 如果超出出现滚动条 */ overflow: auto;}.right-in { /* 假设容器内有500px的元素 */ height: 500px;}关于 Grid 布局的详细用法请参考
关键词：布局,方式,实现
