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 ...
随机推荐
- 怎样增加phpmyadmin导入文件上限
1 2 3 分步阅读 百度经验:jingyan.baidu.com phpMyAdmin 是一个用PHP编写的,可以通过 web 方式控制和操作 MySQL 数据库.因为操作简单被广大的使用mysql ...
- Linux服务器在外地，如何用eclipse连接hdfs
配置外网和内网的映射,内部所有配置全部用内网的IP 本地所有配置皆为外网地址 本地给服务器发指令全部由映射转换为内网指定IP,即可
- PHP中几种加密形式
1.Md5加密和Crypt都是单向加密: 登陆时把登录密码转为md5值,然后和数据库中的进行比较. 其中crypt中的盐值支持多种: 以CRYPT_STD_DES是以/0-9A-Za-z/中的两个字符 ...
- set源码之心得
C++的STL很强大,强大到我只愿慵懒地去使用而不知其所以然.直到李师问我,我的回答被李师否定,我方才意识到自己是多么地浅陋.希望自己有空抽时间把STL源码给研究一下,化为自己真正可以掌控的力量. s ...
- Windows版本Apache+php的Xhprof应用__[2]
[计划] “Windows版本Apache+php的Xhprof应用__[1]”中已经解决了下载,配置的问题,所以这里的工作是接着进行的,我们以调试一个 php代码的文件来看看是怎么用xhprof的. ...
- ArcGIS10拓扑规则-面规则（转）
ArcGIS10拓扑规则-面规则 原创 2013年12月27日 10:20:44 标签: ArcGIS 1879 ARCGIS 10 里提供的拓扑规则共32种,下面一一介绍: 首先介绍的对于面图层的拓 ...
- PCL — Point Pair Feature 中层次点云处理
博客转载自:http://www.cnblogs.com/ironstark/p/5971976.html 机器人视觉中有一项重要人物就是从场景中提取物体的位置,姿态.图像处理算法借助Deep Lea ...
- rest-framework组件 之 渲染器与版本
浏览目录 渲染器 版本 渲染器 规定页面显示的效果(无用,了解即可). 局部渲染 只返回json数据. 效果: 看另一种情况: 既返回json数据,又嵌套在html中.注意:容易出bug. 效果如下: ...
- Entity Framework Tutorial Basics（32）：Enum Support
Enum in Entity Framework: You can now have an Enum in Entity Framework 5.0 onwards. EF 5 should targ ...
- Spring第一篇
我计划用3到五篇文章来描述Spring,这是第一篇 1 . 什么是Spring Spring 是一个开源框架,Spring 是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnso ...