CSS全屏布局的5种方式
前面的话
全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的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都可以实现
CSS全屏布局的5种方式的更多相关文章
- CSS全屏布局的6种方式
前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...
- iPhone 横竖屏切换，全屏播放的三种方式
1. 调用系统自带的强制屏幕旋转不过还得在AppDelegate中重写下面方法 - (UIInterfaceOrientationMask)application:(UIApplication *)a ...
- Activity设置全屏显示的两种方式及系统自带theme属性解析
转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...
- CSS等高布局的6种方式
× 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
- CSS等高布局的7种方式
前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...
- Android中界面实现全屏显示的两种方式
在开发android的应用当中,我们会遇到将一些界面设置为全屏显示的格式,有两种实现的方法.其一是在Java代码中实现,其二是在配置文件中实现. 1. 在Java代码中设置 super.onCreat ...
- Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
- day09—css布局解决方案之全屏布局
转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...
- 实现CSS等分布局的4种方式
× 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...
随机推荐
- String.Format格式说明——复制于DotNet笔记
String.Format格式说明 C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 st ...
- Linux内核分析之扒开系统调用的三层皮（下）
一.实验内容 1. 通过内核的方式使用系统调用 需要使用的命令 rm menu -rf //强制删除当前menugit clone http://github.com/mengning/menu.gi ...
- android控件
---恢复内容开始--- (1)文字大小的类型 px.dip.sp.pt.in.mm (2)TextView控件 超链接显示 属性autoLink="all" (3)EditTex ...
- CAS 4.0.0RC 配置MD5验证功能
配置内容同一样,只是增加一些配置. 因为cas已经默认就支持MD5加密验证,所以只是修改一下配置就可以了. <bean id="primaryAuthenticationHandler ...
- android wifi obtainmessage sendmessage解析
obtainmessage 从message pool获取一个对象 sendmessage 将message插入message queue java中wait和notify是一对,wait进入睡眠等待 ...
- C#.net 中 修饰符 详解 （来自MSDN）
自己理解的不够深刻,无奈基础较差!记上一笔,记忆深刻些,哈哈…… 1. 访问修饰符 public 同一程序集中的任何其他代码或引用该程序集的其他程序集都可以访问该类型或成员. private 只有同一 ...
- PHP中实现MySQL嵌套事务的两种解决方案
PHP中实现MySQL嵌套事务的两种解决方案 一.问题起源 在MySQL的官方文档中有明确的说明不支持嵌套事务: Transactions cannot be nested. This is a co ...
- 条件随机场理论分析CRF(Conditional Random Field)
- fatal error C1083: 无法打开预编译头文件:“Debug\a.pch”:No such file or directory
一.解决方法 右键点击你创建的项目,选择“属性标签”点击属性,弹出“项目属性页”,在左侧找到以下位置 配置属性 --> C/C++ --> 预编译头,并选择它:在右边的菜单中选择 “ ...
- 手Q兴趣号的价值在哪里
拥有5.21亿月活跃用户,如果不做点什么东西出来,实在是浪费至极.如此庞大的用户量,如果能够将内容贡献出来,那将是恐怖的,QQ空间产品就是很好的佐证. QQ群让个体用户能够连接在一起,单个的用户关系链 ...