该需求来源一次面试题。

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. CSS——display

    display的主要属性: 1.none: 不显示: 不保留其在页面中的位置,即相当于html文档中没有这个元素: visible:hidden虽然也不显示:但依然保存着他的位置和大小. 2.bloc ...

  2. Navicat断网时连不上数据库

    最近安装了破解的Navicat,在有网的条件下可以连接本地安装的MySQL数据库,但断网之后就不可以,如下: 于是上网查资料,发现原因为: localhost可以看成是一个域名,在一大部分情况下,它能 ...

  3. struct-config.xml配置文件的解析

    //定义了xml文件的版本和编码<?xml version="1.0" encoding="UTF-8"?>//配置文件中的元素必须按照下述doc指 ...

  4. CentOS 7 下设置DNS

    在CentOS 7下,手工设置 /etc/resolv.conf 里的DNS,过了一会,发现被系统重新覆盖或者清除了.和CentOS 6下的设置DNS方法不同,有几种方式: 1.使用全新的命令行工具 ...

  5. Express响应方法

    下表中响应对象(res)的方法向客户端返回响应,终结请求响应的循环.如果在路由句柄中一个方法也不调用,来自客户端的请求会一直挂起. 方法 描述 res.download() 提示下载文件. res.e ...

  6. 基于R语言的RRT算法效率统计

  7. 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录（重点）

    1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...

  8. Entity Framework Code-First（22）：Code-based Migration

    Code-based Migration: Code-based migration is useful when you want more control on the migration, i. ...

  9. 数据结构 elegant_sequence(优雅的序列)

    数据结构 elegant_sequence(优雅的序列) 问题描述 如果一个序列的元素的异或和等于 1,我们称这个序列为优雅的序列.现在给你一个 01 序列,和 m 次询问.对于每次询问,给出 l,r ...

  10. LeetCode第617题：合并二叉树

    问题描述 解题思路 略略略略略 C++代码 /** * Definition for a binary tree node. * struct TreeNode { * int val; * Tree ...