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 ...
随机推荐
- 【SPOJ GSS】数据结构题选做
SPOJ GSS1 题意:给一个序列以及一些询问,每个是问\([l,r]\)中最大连续子序列和是多少. 思路:这个问题是以下问题的基础. 我们考虑用线段树来解决这个问题. 首先我们来想想如果要求出最大 ...
- Android学习之基础知识十五 — 最佳UI体验（Material Design实战）
一.前言 长久以来,大多数人都认为Android系统的UI并不美观,至少没有iOS系统的美观.以至于很多IT公司在进行应用界面设计的时候,为了保证双平台的统一性,强制要求Android端的界面风格必须 ...
- C#以管理员用户打开某个程序
static void Main(string[] args) { string path = @"C:\Windows\AppPatch\AppLoc.exe"; Process ...
- JS-隐士类型转换‘1’+1、‘1’-1、++‘1’为什么不一样？
当 x=’1’时,x+1x-1+x-x++xtypeof(x+1)typeof(x-1)typeof(+x)typeof(-x)typeof(++x) 的结果分别是多少? 答案: x+1 //’11’ ...
- C# 多线程 Parallel.For 和 For 谁的效率高？那么 Parallel.ForEach 和 ForEach 呢？
还是那句话:十年河东,十年河西,莫欺少年穷. 今天和大家探讨一个问题:Parallel.For 和 For 谁的效率高呢? 从CPU使用方面而言,Parallel.For 属于多线程范畴,可以开辟多个 ...
- 微信小程序：java后台获取openId
一.功能描述 openId是某个微信账户对应某个小程序或者公众号的唯一标识,但openId必须经过后台解密才能获取(之前实现过前台解密,可是由于微信小程序的种种限制,前台解密无法在小程序发布后使用) ...
- 一次Java内存泄漏调试的有趣经历
人人都会犯错,但一些错误是如此的荒谬,我想不通怎么会有人犯这种错误.更没想到的是,这种事竟发生在了我们身上.当然,这种东西只有事后才能发现真相.接下来,我将讲述一系列最近在我们一个应用上犯过的这种错误 ...
- 值类型和引用类型的区别，struct和class的区别
C#值类型和引用类型 1.简单比较 值类型的变量直接存储数据,而引用类型的变量持有的是数据的引用,数据存储在数据堆中. 值类型(value type):byte,short,int,long,floa ...
- Quartz_简单使用
第一步:安装 新建一个QuartzDemo项目后,安装下面的程序包 Install-Package Quartz Install-Package Common.Logging.Log4Net1211 ...
- Centos6.9下RocketMQ3.4.6高可用集群部署记录(双主双从+Nameserver+Console)
之前的文章已对RocketMQ做了详细介绍,这里就不再赘述了,下面是本人在测试和生产环境下RocketMQ3.4.6高可用集群的部署手册,在此分享下: 1) 基础环境 ip地址 主机名 角色 192. ...