CSS全屏布局的6种方式
前面的话
全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的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全屏布局的6种方式的更多相关文章
- CSS全屏布局的5种方式
× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结 前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介 ...
- 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 ...
随机推荐
- B-Tree外存数据结构 _（外存储器—磁盘）第一部分
1.外存储器—磁盘 计算机存储设备一般分为两种:内存储器(main memory)和外存储器(external memory).内存存取速度快,但容量小,价格昂贵,而且不能长期保存数据(在不通电情况下 ...
- kubernetes 里面pod时间修改
yaml文件中设置时区同步,只需要映射主机的“/etc/localtime”文件. apiVersion: extensions/v1beta1kind: Deploymentmetadata: na ...
- Codechef TAPAIR Counting the important pairs 随机化、树上差分
传送门 题意:给出一个$N$个点.$M$条边的无向连通图,求有多少组无序数对$(i,j)$满足:割掉第$i$条边与第$j$条边之后,图变为不连通.$N \leq 10^5 , M \leq 3 \ti ...
- 算法相关——Java排序算法之冒泡排序（二）
0. 前言 本系列文章将介绍一些常用的排序算法.排序是一个非常常见的应用场景,也是开发岗位面试必问的一道面试题,有人说,如果一个企业招聘开发人员的题目中没有排序算法题,那说明这个企业不是一个" ...
- OLED小记
1.点阵组成OLED,OLED中有一个GRAM区域,区域中的值直接刷新到屏幕上,对应关系是1bit对应一个像素点: 2.要点亮一个像素点,只需要将GRAM中的对应bit位写1即可.GRAM中是分页来管 ...
- .NET CORE下的Cache
.NET CORE 下的缓存跟之前ASP.NET下的缓存有所不同,应用.NET CORE缓存首先需要引入Microsoft.Extensions.Caching.Memory程序包 下面简单写了一个C ...
- Android恶意样本数据集汇总
硕士论文的研究方向为Android恶意应用分类,因此花了一点时间去搜集Android恶意样本.其中一部分来自过去论文的公开数据集,一部分来自社区或平台的样本.现做一个汇总,标明了样本或数据集的采集时间 ...
- Nginx反向代理中使用proxy_redirect重定向url
在使用Nginx做反向代理功能时,有时会出现重定向的url不是我们想要的url,这时候就可以使用proxy_redirect进行url重定向设置了.proxy_redirect功能比较强大,其作用是对 ...
- mysqldump数据导出问题和客户端授权后连接失败问题
1,使用mysqldump时报错(1064),这个是因为mysqldump版本太低与当前数据库版本不一致导致的.mysqldump: Couldn't execute 'SET OPTION SQL_ ...
- ACM-ICPC 2017 Asia Urumqi：A. Coins（DP）
挺不错的概率DP,看似基础,实则很考验扎实的功底 这题很明显是个DP,为什么???找规律或者算组合数这种概率,N不可能给的这么友善... 因为DP一般都要在支持N^2操作嘛. 稍微理解一下,这DP[i ...