CSS布局指南：全屏布局

terry 2年前 (2023-09-27) 阅读数 61 #数据结构与算法

全屏布局是实现页眉、内容区和底部三个主要区域占据整个屏幕的经典布局。这种布局很常见。

实现效果如下：

分析：这里采用的解决方案是在表头底部采用固定定位，中间采用之前提到的两栏布局技术。

注意：您可以在页眉底部使用 页眉和页脚标签。内容区域的结构和设计是多种多样的。

 <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
来源：掘金
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明来源。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：CSS 溢出概念和示例：如何解决水平滚动问题下一篇：CSS布局指南：N列布局

CSS布局指南：全屏布局

版权声明

作者文章