该需求来源一次面试题。

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. 10-23C#基础--特殊集合（stack、queue、hashtable）

    特殊集合一:stack集合--堆集合 1.定义:堆集合是集合中一种特殊的类,在Stack中也有许多方法和属性,下面一一列举: 命名格式:Stack ss=new Stack(); 2.如何添加数据:p ...

  2. numpy.percentile

    http://docs.scipy.org/doc/numpy/reference/generated/numpy.percentile.html numpy.percentile(a, q, axi ...

  3. DAY13-前端之BOM和DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  4. latex如何进行多行注释

    单行注释:当LATEX 处理一个源文件时,如果遇到一个百分号%,LATEX 将忽略% 后的该行内容,换11行符以及下一行前的空白字符.多行注释:\begin{comment}rather stupid ...

  5. sys模块 进度条百分比

    用于提供对Python解释器相关的操作: sys.argv           命令行参数List,第一个元素是程序本身路径 sys.exit(n)        退出程序,正常退出时exit(0) ...

  6. Codeforces 1077(F1+F2) DP 单调队列

    题意:给你一个n个元素的数组,从中选取x个元素,并且要保证任意的m个位置中必须至少有一个元素被选中,问选中元素的和最大可以是多少? F1 n,m,x到200 F2 n,m,x到5000. 思路1:设d ...

  7. 生产者与消费者-1：N-基于list

    一个生产者/多个消费者: /** * 生产者 */ public class P { private MyStack stack; public P(MyStack stack) { this.sta ...

  8. Centos7安装mysql缺乏yum源怎么安装

    找到mysql5.6的centos的repo源,终于解决mysql的安装问题: 1.确保centos安装了wget,没有的话安装wget   1 yum install wget 2.下载mysql的 ...

  9. 3、PACBIO下机数据如何看

    转载:http://www.cnblogs.com/jinhh/p/8328818.html 三代测序的下机数据都有哪些,以及他们具体的格式是怎么样的(以sequel 平台为主). 测序过程 SMRT ...

  10. js获取指定小时日期格式化

    不得不感叹一下,聪明的程序员写的代码真是让人惊奇 找了一圈格式化代码的方式,下面的这个使用了一个 slice 函数,真是厉害 https://stackoverflow.com/questions/4 ...