前面的话

  全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的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种方式的更多相关文章

  1. CSS全屏布局的6种方式

    前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...

  2. iPhone 横竖屏切换,全屏播放的三种方式

    1. 调用系统自带的强制屏幕旋转不过还得在AppDelegate中重写下面方法 - (UIInterfaceOrientationMask)application:(UIApplication *)a ...

  3. Activity设置全屏显示的两种方式及系统自带theme属性解析

    转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...

  4. CSS等高布局的6种方式

    × 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...

  5. CSS等高布局的7种方式

    前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...

  6. Android中界面实现全屏显示的两种方式

    在开发android的应用当中,我们会遇到将一些界面设置为全屏显示的格式,有两种实现的方法.其一是在Java代码中实现,其二是在配置文件中实现. 1. 在Java代码中设置 super.onCreat ...

  7. Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局

    居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...

  8. day09—css布局解决方案之全屏布局

    转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...

  9. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

随机推荐

  1. Android ImageView高度根据图片比例自适应

    设置adjustViewBounds // 是否保持宽高比 <ImageView android:id="@+id/iv_test" android:layout_width ...

  2. Debian 7 安装 wireshark

    安装过程很简单: $ sudo apt-get install wireshark 其中会弹出一个对话框: ┌─────────────────────┤ Configuring wireshark- ...

  3. SAP SLT (Landscape Transformation) 企业定制培训

    No. Item Remark 1 SAP SLT概述 SAP Landscape Transformation Overview 2 SAP SLT 安装与配置<1> for abap ...

  4. Hibernate -- A unidirectional one-to-one association on a foreign key

    at sometime we usually need to create two tables that one table relate another.Such as a husband onl ...

  5. PHPBB公布新的维护版本

    9月28日,PHPBB官方网站公布了新PHPBB的最新消息.这个版本命名为:"Richard 'D¡cky' Foote",版本号为3.0.12.据官方的说明,“这个版本是一个维护 ...

  6. Rubinius 2.0 发布,Ruby 虚拟机

    Rubinius 2.0 发布了,官方发行说明请看这里. Rubinius是一个运行Ruby程序的虚拟机,其带有Ruby的核心库. Rubinius的设计决定了其调试功能的强大,使得在运行时常规的Ru ...

  7. TypeScript之基本数据类型

    前言 最近项目很急,所以没有什么时间回答关于Xamarin.Android方面的问题,也有一段时间没有更新.主要是手头很缺人,如果有谁有兴趣加入我们的话,可以私聊我,这样我就能继续造福社区了,同时还有 ...

  8. 用JQ仿造百度书籍预售页面的单屏滚页效果

    今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上 ...

  9. XSS零碎指南

    该文章是本人两天的学习笔记,共享出来,跟大家交流.知识比较零散,但是对有一定 JS 基础的人来说,每个小知识都有助于开阔你的 Hack 视角.首先声明,本文只是 XSS 攻击的冰山一角,读者自行深入研 ...

  10. JavaScript思维导图—变量

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/