html 布局满屏,CSS全屏布局的5种方式
前面的话
全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路
思路一: 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>
divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> 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>
divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middleWrap'> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> 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>
divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> 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>
divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middleWrap'> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='rightWrap'> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> 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>
divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middleWrap'> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='rightWrap'> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> 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>
divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> 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>
divclass='parent'id='parent'style='background-color: lightgrey;'> divclass='top'style='background-color: lightblue;'> p>topp> div> divclass='middle'style='background-color: pink;'> divclass='left'style='background-color: orange;'> p>leftp> div> divclass='right'style='background-color: lightsalmon;'> divclass='right-in'> p>rightp> div> div> div> divclass='bottom'style='background-color: lightgreen;'> p>bottomp> div> div>
总结
全屏布局实际上就是两列或三列自适应布局的扩展形式。由于实现的是全屏效果,高度实际上是固定的,所以思路并没有等高布局局限。水平方向元素之间的间距根据实际情况使用margin、padding、border都可以实现
html 布局满屏,CSS全屏布局的5种方式相关推荐
- 一分钟实现纯CSS全屏滚动特效
一分钟实现纯CSS全屏滚动特效 Hello World [你好世界]-Hello World-"无论世界多么崩坏,我都只想再见到她的笑颜" 端午节快乐! 会用到的CSS属性 bac ...
- android dialog 横向全屏,Dialog全屏,去掉状态栏的方式
dialog即使设置全屏了,但还是有状态栏占用高度这: 直接将下面这行代码放到你的dialog中即可 @Override protected void onStart() { super.onStar ...
- Android 强制设置横屏或竖屏 设置全屏
Android 强制设置横屏或竖屏 设置全屏 全屏 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 requestWindowFeatur ...
- Android 切换全屏,取消全屏
切换全屏,取消全屏 /*** 切换全屏,取消全屏** @param isChecked*/ private void switchFullScreen(boolean isChecked) {if ( ...
- 单屏(全屏)适配解决方案(jQuery插件)
文章目录 背景 案例分析 案例总结 插件原理 插件实现 说明文档 Introduction Application.js Configuration Examples 总结 背景 在平时的web开发过 ...
- 手机投屏不是全屏怎么办_手机、电脑投屏怎么全屏
原标题:手机.电脑投屏怎么全屏 手机.电脑投屏怎么全屏 为什么我们将手机.电脑投屏在大屏幕上经常会出现不是满屏的情况.主要原因是因为投屏端(手机.电脑)和显示端的长宽比例不一致导致的. Windows ...
- 根据UI图设计的大小换算REM单位以及大屏页面全屏展示
需求:UI图设计的1366px,产品希望往大了适配,字体和div宽度都需要适配实际页面宽: 设置rem节点适配 例如设计的UI图尺寸是1366宽的,则正常页面往下滚动的是情况下,输入UI图设计的尺寸, ...
- html全屏/退出全屏按钮,以及监听Esc退出后按钮样式变更
全屏和退出全屏引用了layui里面的icon标签,也可以使用自己的图片,都可以. html: <div id="screenDiv"><!-- 以下是layui里 ...
- 远程桌面退出全屏/不能全屏/全屏切换的技巧
远程桌面退出全屏/不能全屏/全屏切换的技巧退出全屏 问:我的电脑远程登录到服务器上并且切换到了全屏状态,全屏后发现桌面顶部没有浮动工具栏了,想退出全屏状态,不知如何退出了,最后,只有重启电脑.想知道如 ...
最新文章
- 用好 Git 和 SVN,轻松驾驭版本管理
- python解释器pypy
- Spring Boot内容概要
- modelform save
- 根据实例说数据库设计(一)—— 人员管理
- SSM+easyUI(框架的搭建)
- 微价值:专訪个人开发人员800万用户之《系统清道夫》
- Android 功能系列篇
- 了解:shell脚本+脚本优化+脚本注入+正则表达式
- 【TSP】基于matlab GUI改进的遗传算法求解旅行商问题【含Matlab源码 926期】
- AC日记——计算循环节长度 51nod 1035
- 量子计算机可以预测未来吗,这台量子计算机可以同时预测16种不同的未来
- 10098 全排列水题
- windows11 显示文件后缀名
- 蓝桥杯大学本科B组考点整理
- Kafka多个消费者监听消费同一个Topic主题
- 2021—10—31 上课笔记
- 教你轻松一键安装win10系统
- C#(同步调用、异步调用、异步回调)
- PDF加密文件解密方法(解除复制打印限制)——转帖
热门文章
- 安装 SAP Cloud Application Programming SDK @sap/cds-dk 时报错以及解决方案
- SAP Spartacus Table cell显示数据类型的Component决定逻辑
- SAP Spartacus界面注册用户获取OAuth Access Token的方式
- 如何为SAP Cloud for Customer Lead页面配置自定义的Source字段
- CRM中间件里parent not ok的错误消息如何处理
- 在SAP Cloud Platform上消费Business partner service遇到的错误
- SAP BOPF BO draft状态的数据激活原理
- Daimler CRM中间件 inbound 调试
- 如何处理APF框架的错误消息:Filter is too complex error
- ERP failure: Error when opening an RFC connection