day09—css布局解决方案之全屏布局
转行学开发,代码100天——2018-03-25
今天,本文记录全屏布局的的方法。全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,;浏览器变大时,撑满窗口。
如:设置下图中布局,其中top区,left区固定宽度,right(inner)区自适应
主要实现方法有:
- 使用position方法
即将上下部分固定,中间部分使用定宽+自适应+两块高度一样高方法。
程序代码:
<div class="parent">
<div class="top">top</div>
<div class="left">left</div> <div class="right">
<div class="inner">inner<br/>inner<br/>inner<br/>inner<br/>inner<br/>inner<br/>inner<br/></div>
</div>
<div class="bottom">bottom</div>
</div>
样式表:
*
{
margin:0;
padding: 0;
}
html,body,.parent
{
margin: 0;
height: 100%;
overflow: hidden; }
body
{
color: white;
}
.top
{
position: absolute;
top:0;
left:0;
right: 0;
height: 100px;
background-color: blue;
}
.left
{
position: absolute;
left: 0;
top: 100px;
bottom: 50px;
width: 200px;
background-color: red;
}
.right
{
position: absolute;
left: 200px;
top: 100px;
bottom: 50px;
right: 0;
background-color: pink;
overflow: auto; //设置right区内容自动适应,滚动条为局部滚动条 }
.right .inner
{
min-height: 1000px;
}
.bottom
{
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 40px;
background-color: black;
}
该方法兼容性较好,但是不支持ie6以下浏览器。
- 使用flex方法
实现方法:通过设置flex属性和flex-direction属性以达到全屏布局。
即在right区增加一个父框middle,并设置属性flex属性及flex显示。
程序代码:
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
<div class="bottom">bottom</div>
</div>
html,body,.parent
{
margin:0;
height: 100%;
overflow: hidden;
}
body
{
color: white;
}
.parent
{
display: flex;
flex-direction: column;
}
.top
{
height:100px;
background-color: blue;
}
.bottom
{
height: 50px;
background-color: black;
}
.middle
{
flex: 1;
display: flex;
}
.left
{
width: 200px;
overflow: auto;
background-color: red;
}
.right
{
flex: 1;
overflow: auto;
background-color:pink;
}
.right .inner
{
min-height: 1000px;
}
缺点即是兼容性差(flex属性)。
....
或者,我们依然可以选择表格方法实现这样的布局,根据所用平台,结合各方法的优缺点选择。
至此,已经完成CSS布局的居中、多列和全屏的解决方案。后期会继续优化这些方法的应用,附上一些案列。
本文加之前的两篇关于布局的内容并非我本人原创,只是在网上看到的一篇文章,记录详细(虽有些小错误),总结到位,在此向前辈表示感谢。
由此,也对自己提出更高要求,在学习的过程中,要善于总结、比较,继续精进!
day09—css布局解决方案之全屏布局的更多相关文章
- CSS全屏布局的5种方式
× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结 前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介 ...
- CSS全屏布局的6种方式
前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的6种思路 float [1]float + calc 通过calc()函数计算出.middle元素的高度,并 ...
- iOS 全屏布局
edgesForExtendedLayout属性用于替代wantsFullScreenLayout,控制页面显示的范围,默认值是UIRectEdgeAll automaticallyAdjustsSc ...
- Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
- 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- CSS+DIV两栏式全屏布局
在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- IPhoneX网页布局 全屏布局(转)
IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试. ...
- day08—css布局解决方案之多列布局
转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...
- css背景图自适应全屏显示
前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...
随机推荐
- python工程的结构
1 python系统库的位置 大部分系统库在/usr/lib64/python2.7目录下,但是像sys模块,是python内置的库,是用c实现的,直接连接进了python.exe中了. 也就是说,在 ...
- C#中Func与Action的理解
Action 与 Func是.NET类库中增加的内置委托,以便更加简洁方便的使用委托.最初使用委托时,均需要先定义委托类型,然后定义一个符合委托类型签名的函数,在调用前,需声明并创建委托对象,将指定函 ...
- 极*Java速成教程 - (2)
Java语言基础 Java的一切都是以对象为基础,对象是生是死的生命周期由虚拟机管理,但是在创生和消亡阶段,需要我们去管理这个类怎么生,怎么死.我们也以此为契机,慢慢接触Java的诸多细节和具体实现. ...
- python 正确复制list,克隆list 的各种方案
推荐4种方法 --------------------------------------------------------------- 方法一:extend L = [1, 2, 3] List ...
- Arrays.asList使用指南和一些坑(转)
一.java.util.Arrays.asList() 的一般用法 List 是一种很有用的数据结构,如果需要将一个数组转换为 List 以便进行更丰富的操作的话,可以这么实现: String[] m ...
- javascript中的对象字面量为啥这么酷
原文链接 : Why object literals in JavaScript are cool 原文作者 : Dmitri Pavlutin 译者 : neal1991 个人主页:http://n ...
- 将两个列表合并为字典_其中一个列表为Key_一个列表为Value
#定义两个列表 list1 = range(0,10) list2 = range(10,20) #合并为字典,调用dict(zip()) dict_name = dict(zip(list1,lis ...
- SPOJ - DQUERY (主席树求区间不同数的个数)
题目链接:https://vjudge.net/problem/SPOJ-DQUERY 题目大意:给定一个含有n个数的序列,有q个询问,每次询问区间[l,r]中不同数的个数. 解题思路:从左向右一个一 ...
- CF3D Least Cost Bracket Sequence(2500的实力贪心...
哎,昨天一直在赶课设..没有写 最近听了一些人的建议,停止高级算法的学习,开始刷cf. 目前打算就是白天懒得背电脑的话,系统刷一遍蓝书紫书白书之类的(一直没系统刷过),回宿舍再上机吧. https:/ ...
- Redis分布式锁【正确实现方式】
前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...