该需求来源一次面试题。

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(十三).高度如何铺满全屏的更多相关文章

  1. html盒子铺满全屏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 设置ImageView显示的图片铺满全屏

    转自:http://m.blog.csdn.net/blog/wjwj1203/32334459   为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...

  3. 怎么样imageview实现铺满全屏

    <ImageView android:layout_width="match_parent" android:layout_height="match_parent ...

  4. 微信小程序设置背景铺满全屏

    参考方法: 新版本升级取消了默认page的100%的特性 需要在app.wxss文件中加入如下代码: page{ height:100%; }

  5. iOS 10 下 Plus 启动APP 导致Icon 铺满全屏问题

    1.解决方法,添加LacuchScreen 启动图需要手动适配 http://stackoverflow.com/questions/39571694/ipad-application-shows-a ...

  6. android设置GridView高度自适应，实现全屏铺满效果

    使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...

  7. 【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  8. Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  9. Unity打开摄像头占满全屏

    Unity打开摄像头占满全屏 AR项目需求,Unity打开摄像头作为背景渲染占满全屏~ Unity对设备硬件操作的API并不是太友好~打开一个摄像头,渲染到屏幕上也都得自己写,虽然步骤少,提取摄像头t ...

随机推荐

  1. 问题：Oracle 树形遍历；结果：使用oracle进行遍历树操作

    使用oracle进行遍历树操作   1:首先数据库中表必须是树形结构的 2:super_department_id 为 department_id 的父节点编号 3:以下语句的执行结果是:depart ...

  2. C++知识点总结(5)

    1.为何静态成员函数不能调用非静态成员函数 静态成员函数可以不需要类的实例就直接使用,非静态的成员函数很可能用到一些成员变量,而成员变量的创建和初始化是在创建了类的实例时在构造函数调用的时候才进行的. ...

  3. memset,memcpy,strcpy的使用与区别

    1.memset 原型:   extern void *memset(void *buffer, int c, int count); 功能:   把buffer所指内存区域的前count个字节设置成 ...

  4. ArcGIS10拓扑规则-面规则（转）

    ArcGIS10拓扑规则-面规则 原创 2013年12月27日 10:20:44 标签: ArcGIS 1879 ARCGIS 10 里提供的拓扑规则共32种,下面一一介绍: 首先介绍的对于面图层的拓 ...

  5. winform combobox绑定数据

    mboBox下拉菜单控件,在数据库内的ComboBox应用的表进行修改时,如果是用的普通方法,显示数据一个方法,添加数据一个方法 这样会导致程序后期维护难度增加,在这里使用数据绑定来让ComboBox ...

  6. 一篇docker的详细技术文章

    http://www.open-open.com/lib/view/open1423703640748.html

  7. 杭电acm 1037题

    本题应该是迄今为止最为简单的一道题,只有一组输入,输出也简单.... /****************************************** 杭电acm 1037题 已AC ***** ...

  8. PCL—关键点检测（NARF）低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5051533.html 关键点检测本质上来说,并不是一个独立的部分,它往往和特征描述联系在一起,再将特征描述和识别. ...

  9. Matlab 摄像机标定+畸变校正

    博客转载自:http://blog.csdn.net/Loser__Wang/article/details/51811347 本文目的在于记录如何使用MATLAB做摄像机标定,并通过opencv进行 ...

  10. java中怎么把String转化为字符数组呢？

    我想让用户输入一组字符串,然后将这个字符串的每一个赋给一个char.即,abcde char ch[]=new char[5]; ch[0]=a;ch[1]=b;..... 解决方案如下图所示: St ...