CSS(十三).高度如何铺满全屏
该需求来源一次面试题。
IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。所以，要想写出跨浏览器的CSS，你必须采用标准模式。好像太绝对了，呵呵。好吧，要想写出跨浏览器CSS，你最好采用标准模式。
目前能够找到的有两种方案：
- A.利用css百分比实现
- B.利用css vh 单位实现(直接设置即可，非常简单快捷)
vh,是css中的相对长度单位，表示相对视口高度(Viewport).
首先来说说 A 计划的实现
原理1: 子元素通过父元素的 指定宽高，设定百分比继承父元素的宽高。
原理2: Web浏览器在计算有效宽度的时候会考虑浏览器窗口的打开高度，如果不给宽度设定任何缺省值，则浏览器自动铺满横向宽度。但高度计算方法不一样。浏览器根本不计算内容的高度 换句话说。浏览器：width:100%;height:auto;
1.怪异模式下，body 可以作为根元素。2.标准模式下，html 才是根节点。
有
<!DOCTYPE html>是 标准模式。没有则是怪异模式。
通常我们都推荐 标准模式。也就是说，我们需要通过设置 html{width100%;}
标准模式实现如下(html头部含有<!DOCTYPE html>)
css
html,body {
height: 100%;
}
html
<div id="box" style="background-color: blue;width:100px;height:100%;"></div>
怪异模式实现如下(html头部不含<!DOCTYPE html>)
css
body {
height: 100%;
}
html
<div id="box" style="background-color: blue;width:100px;height:100%;"></div>
接下来非常说说B计划，其实非常简单。直接设置 vh 即可。
该方法需要 IE9 以上。
原理：vh是相当于视窗的高度(满高是100vh)。vw是相当于视窗的宽度(满宽是100vw)。 浏览器内部可视区域。window.innerWidth
满高实现如下
<div id="box" style="background-color: blue;height:100vh;"></div>
CSS(十三).高度如何铺满全屏的更多相关文章
- html盒子铺满全屏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 设置ImageView显示的图片铺满全屏
转自:http://m.blog.csdn.net/blog/wjwj1203/32334459 为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...
- 怎么样imageview实现铺满全屏
<ImageView android:layout_width="match_parent" android:layout_height="match_parent ...
- 微信小程序设置背景铺满全屏
参考方法: 新版本升级取消了默认page的100%的特性 需要在app.wxss文件中加入如下代码: page{ height:100%; }
- iOS 10 下 Plus 启动APP 导致Icon 铺满全屏问题
1.解决方法,添加LacuchScreen 启动图需要手动适配 http://stackoverflow.com/questions/39571694/ipad-application-shows-a ...
- android设置GridView高度自适应，实现全屏铺满效果
使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...
- 【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现 自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...
- Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现 自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...
- Unity打开摄像头占满全屏
Unity打开摄像头占满全屏 AR项目需求,Unity打开摄像头作为背景渲染占满全屏~ Unity对设备硬件操作的API并不是太友好~打开一个摄像头,渲染到屏幕上也都得自己写,虽然步骤少,提取摄像头t ...
随机推荐
- ORA-00600:内部错误代码,参数:[kpnxdcbk-2],[],[],[],[],[],[],[],[],[],[],[]
由于最近工作中常出现ORA-00600:内部错误代码,参数:[kpnxdcbk-2],[],[],[],[],[],[],[],[],[],[],[]这种异常!所以在这里讲一下我的处理方法. 笔者所遇 ...
- H.264学习笔记
1.帧和场的概念 视频的一场或一帧可用来产生一个编码图像.通常,视频帧可以分成两种类型:连续或隔行视频帧.我们平常看的电视是每秒25帧,即每秒更换25个图像,由于视觉暂留效应,所以人眼不会感到闪烁.每 ...
- DAY10-MYSQL数据类型
一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...
- warning: control reaches end of non-void function 和 warning: implicit declaration of function 'rsgClearColor' is invalid in C99
用gcc编译一个程序的时候出现这样的警告: warning: control reaches end of non-void function 它的意思是:控制到达非void函数的结尾.就是说你的一些 ...
- javascript作用域原理
问题的提出 首先看一个例子: var name = 'laruence'; function echo() { alert(name); var name = 'eve'; alert(name); ...
- Comparatable接口和Comparator接口的使用与区别
这篇博文可以为你解决的问题如下: 什么是自然排序 Collections.sort()与Arrays.sort()的异同点 Comparatable接口和Comparator接口各自的排序依据(理论讲 ...
- 2-2 zookeeper下载、安装以及配置环境变量
https://archive.apache.org/dist/zookeeper/zookeeper-3.4.11/ FTP的软件:FileZilla Client 登录腾讯云服务器tail /va ...
- [poj3041]Asteroids(二分图的最小顶点覆盖)
题目大意:$N*N$的网格中有$n$颗行星,若每次可以消去一整行或一整列,求最小的攻击次数使得消去所有行星. 解题关键:将光束当做顶点,行星当做连接光束的边建图,题目转化为求该图的最小顶点覆盖,图的最 ...
- Cocos2d-x 网络编程
主要介绍内容:Http协议,Socket协议,webSocket协议, Cocos2d-x中的相关类和方法 1 Http协议 HTTP协议也叫超文本传输协议.是互联网广泛使用的通信协议,常用于B/S架 ...
- 树莓派研究笔记（7）-- lakka 《仙剑奇侠传》的完美移植
仙剑,这是我玩的第一个电脑游戏.真的太经典,无法超越.原来第一次玩的缺少开场动画,很多地方不明不白的.现在终于我们可以把这个梦想继续到树莓派中. LAKKA是支持DOS模拟器的,所以我们一定要下载DO ...