css 布局之全屏布局

作者：Augus

2021 年 11 月 21 日
本文字数：945 字
阅读完需：约 3 分钟

前言

最近，被 UI 折磨一番之后，觉得自己修改样式的时候，发现很多重复的代码，尤其是在布局方面，重复的代码尤为的多，故决定，在此多复习一些布局，特此记录。

布局

全屏布局

全屏布局可以说是一种很经典的布局了，在各大 UI 框架中都可以看到他的身影。
由顶部、主体内容和底部三部分构成，左右两边满屏拉伸，顶部和底部固定高度，主体内容采用自适应的形式。使用 <header>、<content>和<footer>标签排版，还可以根据自己的需要与否添加侧边栏。
接下来我们来让我们一起来实现它。

<div class="layout">     <header></header>     <centent></centent>     <footer></footer> </div>

复制代码

实现

记住全屏的布局的特点，可以通过left: 0 和 right: 0来实现内容拉满的效果，顶部和底部可以通过 top: 0 和 bottom: 0来分别实现，并按照自己的需要，设置相应的顶部和底部高度；然后在通过 top 和 bottom 来设置主体内容的高度。

.layout {     position: relative;     width: 1920px;     height: 1080px;     header, footer, content {         position: absolute;         left: 0;         right: 0;     }     header {         top: 0;         height: 150px;         background-color: crimson;     }     footer {         bottom: 0;         height: 150px;         background-color: blue;     }     content {         top: 150px;         bottom: 150px;         background-color: gray;     } }

复制代码

当然，这时肯定有小聪明想到了 display：flex，没错，使用它也是完全可以的，并能使代码变得更简洁。首先要是用 flex-direction：column 来改变子节点的排列方式为纵向；并设置顶部和底部的高度，并给主体内容设置为 flex：1 来使其自适应。


.layout {     display: flex;     flex-direction: column;     width: 1920px;     height: 1080px;     header {         height: 150px;         background-color: crimson;     }     footer {         height: 50px;         background-color: blue;     }     content {         flex: 1;         background-color: gray;     } }

复制代码

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！

发布于: 2021 年 11 月 21 日阅读数: 13

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

css 布局之全屏布局

前言

布局

全屏布局

实现

Augus

评论