CSS布局指南:全屏布局

2020年4月14日21:13:37 发表评论 86 views

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

实现效果如下:

CSS布局指南:全屏布局

分析: 这里采用的方案是,头部底部使用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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: