全屏布局，就是实现经典的头部，内容区，底部三大区域占满全屏的布局，这种布局很常见。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18140.html
实现效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18140.html
分析： 这里采用的方案是，头部底部使用fixed定位，中间使用之前讲到的两列布局技术。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18140.html
注意： 头部底部可以使用header, footer标签，内容区域结构与布局都是多种多样的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18140.html
<style>
html, body {
margin: 0;
overflow: hidden;
}
.header {
position: fixed;
left: 0;
top: 0;
right: 0;
height: 100px;
background-color: salmon;
}
.w {
position: fixed;
left: 0;
right: 0;
top: 100px;
bottom: 100px;
overflow: auto;
background-color: palevioletred;
}
.w .l {
width: 400px;
/* height: 100%; */
position: fixed;
left: 0;
top: 100px;
bottom: 100px;
background-color: greenyellow;
}
.w .r {
position: fixed;
left: 400px;
right: 0;
top: 100px;
bottom: 100px;
background-color: blueviolet;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 100px;
background-color: goldenrod;
}
</style>
<body>
<div class="header"></div>
<div class="w">
<div class="l"></div>
<div class="r"></div>
</div>
<div class="footer"></div>
</body>
复制代码本篇文章总结了一些常见布局的实现方案，css布局的实现方案很多，需要我们平时多去积累，选择合适的方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18140.html
作者：catboy
链接：https://juejin.im/post/5e91a8a56fb9a03c9037928f
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18140.html