CSS全屏布局的6种方式
来源:互联网 发布:尤克里里调音器软件 编辑:程序博客网 时间:2024/06/10 20:03
文章转自:http://www.cnblogs.com/xiaohuochai/p/5458068.html
前面的话
全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的6种思路
float
【1】float + calc
通过calc()函数计算出.middle元素的高度,并设置子元素高度为100%
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.middle{ overflow: hidden; height: calc(100% - 100px);}.left{ float: left; width: 100px; margin-right: 20px; height: 100%;}.right{ overflow: auto; height: 100%;}.right-in{ height: 1000px;}.top,.bottom{height:50px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
【2】float + absolute + (fix)
通过增加结构来提高兼容性,.middle元素设置100%的高度,.top和.bottom设置absolute覆盖在.middle上
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.top,.bottom{ position: absolute; height:50px; left: 0; right: 0;}.top{top: 0;}.bottom{bottom: 0;}.middleWrap{ height: 100%; overflow: hidden;}.middle{ overflow: hidden; height: 100%; margin: 50px 0;}.left{ float: left; width: 100px; margin-right: 20px; height: 100%;}.right{ overflow: auto; height: 100%;}.right-in{ height: 1000px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middleWrap"> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
inline-block
【1】inline-block + calc
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.middle{ height: calc(100% - 100px); font-size: 0;}.left,.right{ display: inline-block; vertical-align: top; font-size: 16px;}.left{ width: 100px; margin-right: 20px; height: 100%;}.right{ width: calc(100% - 120px); height: 100%; overflow: auto;}.right-in{ height: 1000px;}.top,.bottom{height: 50px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
【2】inline-block + absolute + (fix)
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.top,.bottom{ position: absolute; left: 0; right: 0; height: 50px;}.top{top: 0;}.bottom{bottom: 0;}.middleWrap{ height: 100%; font-size: 0; overflow: hidden;}.middle{ position: relative; height: 100%; margin: 50px 0; overflow: hidden;}.left,.rightWrap{ display: inline-block; vertical-align: top; font-size: 16px;}.left{ position: absolute; width: 100px; margin-right: 20px; height: 100%;}.rightWrap{ width: 100%; height: 100%;}.right{ height: 100%; margin-left: 120px; overflow: auto;}.right-in{ height: 1000px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middleWrap"> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="rightWrap"> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
table
水平方向子元素的间距可以用border实现。所有浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.top,.bottom{ position: absolute; width: 100%; height: 50px;}.bottom{bottom: 0;}.middleWrap{ height: 100%; overflow: hidden;}.middle{ width: 100%; height: 100%; display: table; margin: 50px 0; table-layout: fixed;}.left{ display: table-cell; width: 120px; border-right: 20px solid lightgray;}.rightWrap{ display: table-cell; height: 100%;}.right{ height: 100%; overflow: auto;}.right-in{ height: 1000px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middleWrap"> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="rightWrap"> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
absolute
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.top,.middle,.bottom{ position: absolute; left: 0; right: 0;}.top{ top: 0; height: 50px;}.bottom{ bottom: 0; height: 50px;}.middle{ top: 50px; bottom: 50px;}.left,.right{ position: absolute; top: 0; bottom: 0;}.left{ width:100px;}.right{ left: 120px; right: 0; overflow: auto;}.right-in{ height: 1000px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
flex
flex常用于小范围的布局,使用全屏布局时会因为性能问题,出现卡顿现象。如果要使用全屏自适应布局,则只有flex才能达到效果
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.parent{ display: flex; flex-direction: column;}.top,.bottom{ height: 50px;}.middle{ display: flex; flex: 1;}.left{ width: 100px; margin-right: 20px;}.right{ flex: 1; overflow: auto;}.right-in{ height: 1000px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
grid
<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.parent{ display: grid; grid-template-rows:50px auto 50px;}.middle{ overflow:hidden; display:grid; grid-template-columns: 100px 1fr; grid-gap:20px;}.right{ overflow:auto;}.right-in{ height: 1000px;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
总结
全屏布局实际上就是两列或三列自适应布局的扩展形式。由于实现的是全屏效果,高度实际上是固定的,所以思路并没有等高布局局限。水平方向元素之间的间距根据实际情况使用margin、padding、border都可以实现
阅读全文
0 0
- CSS全屏布局的6种方式
- CSS全屏布局的5种方式
- css的布局方式
- css布局的方式
- css--全屏布局解决方案
- CSS等高布局的6种方式
- css的6大布局方式
- html+css布局的三种方式
- html+css布局的三种方式
- css的3种布局方式
- css的常用布局方式
- html+css布局的三种方式( 自然布局/流动布局 /定位布局)
- 三种基本布局(不常用)以及全屏和Activity的两种启动方式
- 实现CSS等分布局的4种方式
- CSS的四种布局方式static/relative/fixed/absolute
- 实现CSS等分布局的5种方式
- CSS实现多栏布局的几种方式
- CSS常考布局的实现方式
- R + python︱数据规范化、归一化、Z-Score
- POJ2299 Ultra-QuickSort(树状数组)
- 设计模式-单例模式
- f_sync解决fatfs文件掉电数据丢失问题
- popwindow
- CSS全屏布局的6种方式
- 使用node的express框架进行基于cors的get和post跨域
- ESP8266固件升级
- 组合数计算(Lucas 逆元 中国剩余定理)
- TensorFlow
- 注解
- FreeRTOS学习笔记二
- PHP处理微信中带Emoji表情的消息发送和接收(Unicode字符转码编码)
- 2017.8.19 利用python统计文档中的单词数,行数和字符数