写点什么

css 布局之全屏布局

作者:Augus
  • 2021 年 11 月 21 日
  • 本文字数:945 字

    阅读完需:约 3 分钟

css布局之全屏布局

前言

最近,被 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!!!

用户头像

Augus

关注

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

某摸鱼集团

评论

发布
暂无评论
css布局之全屏布局