该需求来源一次面试题。

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. C语言学习笔记--指针概念

    指针也是一种变量,占有内存空间,用来保存内存地址,在32位系统中指针的占用的内存大小为4个字节 1.*号的意义 (1)在指针声明时,*号表示所声明的变量为指针 (2)在指针使用时,*号表示取指针所指向 ...

  2. xcode 编译错误找不到 libz.dylib

    图片对应的是libxml2.dylib  (libz.dylib 遇到的编译错误跟这个类似) 解决方法是在引入库的地方调整原先 比如libz.dylib 的目录: ================== ...

  3. 【摘自张宴的"实战:Nginx"】Nginx的server指令

    server 语法:server name[parameters] 默认值:none 使用环境:upstream 该指令用于指定后端服务器的名称和参数.服务器的名称可以是一个域名.一个IP地址.端口号 ...

  4. 电子模块 001 --- 遥杆 JoyStick

    电子模块 001 - 遥杆 JoyStick - Ongoing - 2016年8月31日 星期三 遥杆 JoyStick 模块 今天介绍:JoyStick 电子模块. 模块名称: 双轴按键摇杆 PS ...

  5. bootstrap.js 文件使用指南

    介绍 使用 Bootstrap v3.3.7 时,需要引入三个脚本文件. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.m ...

  6. 找BUG

    找一找BUG 一段代码,实现一个pop,push,和getmin都是O(1)的方法. 最初源代码 伙伴代码如下,代码的地址可以通过这个访问: Ubuntu Pastebin https://paste ...

  7. PreparedStatement预编译对象实现

    模糊查询   插入 同时插入两行数据   执行更新语句 删除操作          

  8. 从零开始搭建.NET Core 2.0 API(学习笔记一)

    从零开始搭建.NET Core 2.0 API(学习笔记一) 一. VS 2017 新建一个项目 选择ASP.NET Core Web应用程序,再选择Web API,选择ASP.NET Core 2. ...

  9. [WIP]React 核心概念

    创建: 2019/05/01 Hello World   ReactDOM.render( <p>sample</p>, document.getElementById('ro ...

  10. [Django笔记] admin 深入学习

    admin django 内置的管理后台,大部分时候可以通过对admin进行配置来提高开发效率. 数据列表展示 默认情况下显示一个models-objects的列表,如果model定义了 __str_ ...