CSS布局指南：全屏布局

2020-4-14

全屏布局，就是实现经典的头部，内容区，底部三大区域占满全屏的布局，这种布局很常见。

实现效果如下：

分析：这里采用的方案是，头部底部使用fixed定位，中间使用之前讲到的两列布局技术。

注意：头部底部可以使用header, footer标签，内容区域结构与布局都是多种多样的。

 <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布局的实现方案很多，需要我们平时多去积累，选择合适的方案。

作者：catboy
链接：https://juejin.im/post/5e91a8a56fb9a03c9037928f
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

THE END

CSS布局指南：N列布局

<<上一篇

JavaScript算法：二叉树前中后序遍历非递归实现

下一篇>>