深入理解CSS系列（二）：为什么height:100%不生效？
对于height 属性，如果父元素height 为 auto，只要子元素在文档流中（即position不等于fixed或者absolute），其百分比值完全就被忽略了。这是什么意思呢？首先来看个例子，比如，某小白想要在页面插入一个<div>，希望满屏显示黑色背景，就写了如下 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>黑色主题</title>
<style>
.box {
width: 100%; // 这是多余的
height: 100%; // 这是无效的
background: #000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
然后他发现这个<div>高度永远是 0，哪怕其父级<body>塞满了内容也是如此。事实上，他需要加上这样的设置才行：
html, body {
height: 100%;
}
并且仅仅设置<body>也是不行的，因为此时的<body>也没有具体的高度值：
body {
/* 子元素 height:100%依旧无效 */
}
只要经过一定的实践，我们都会发现对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值！但是，怕是很少有人思考过这样一个问题：为何父级没有具体高度值的时候，height:100%会无效？
网上有种观点认为，如果父元素height: auto，又要让子元素height:100%生效的话，会使得布局进入一种死循环。比如下面的代码：
<style>
.child1 {
height: 100px;
}
.child2 {
height: 100%;
}
</style>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
他们的推理大概如下：
parent 元素的高度默认为auto。首先，child1的高度为100px, 这时候 parent 的高度也会等于100px, 然后因为 child2 的height: 100% ，所以它的高度会等于 parent 的高度也变成了100px，这时候 child1 + child2 的高度是200px ,导致 parent 的高度也变成了200px， 接着 child2 因为height: 100%，高度也要等于 parent 的高度，所以变成了200px，然后就会陷入无限死循环了。
这个推论看上去好像有理有据 ，但是，实际上是个谬论来着。为什么这样说呢？要明白其中的原因要先了解浏览器渲染的基本原理。首先，先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染 DOM 内容。套用本例就是，先渲染父元素 parent，后渲染子元素 child1 , 最后渲染子元素 child2 ，是有先后顺序的。因此，当渲染到child2的时候，父元素高度已经固定为 100px 了。高度不够怎么办？溢出就好了，overflow 属性就是为此而生的。
记住，浏览器渲染规则是：静态渲染，一次到位。
真实的原因是：如果包含块（即父元素）的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto（这是计算值，是指渲染之后解释的值，并不是我们设置height: auto所指的值）。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算不了的：
'auto' * 100/100 = NaN
此时，他们的计算结果是NaN,这就是父元素没有设置高度时，子元素高度百分比不生效的原因了。
那有什么办法让高度百分数生效呢？有两种办法。
（1）设定显式的高度值。例如，设置height:600px，或者可以生效的百分比值高度。例如，我们比较常见的：
html, body {
height: 100%;
}
(2)使用绝对定位
为什么使用绝对定位就可以了呢？因为会使元素具有“格式化高度”。那什么又是格式化高度？
格式化宽度/高度仅出现在“绝对定位模型”中，也就是出现在position属性值为 absolute 或 fixed的元素中。当left/top或top/bottom对立方位的属性值同时存在的时候，元素的宽度/高度表现为“格式化宽度/高度”，其宽度/高度相对于最近的具有定位特性（position属性值不是static）的祖先元素计算。
回到开头提到的盒子，小白设置height不生效的问题，如果用绝对定位方法实现，可以设置他的父元素body为绝对定位，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑色主题</title>
<style>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box {
width: 100%;
height: 100%;
background: #000;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
深入理解CSS系列（二）：为什么height:100%不生效？的更多相关文章
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 关于height:100%不生效的问题
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
- 深入理解css系列：清除浮动
如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...
- 深入理解css系列：css定位
一.概述 1.默认文档流定位方式 (1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位: (2).HTML标签元素总体分为块状元素.内联元素.内联块状元素,可通过该标签对应的DOM ...
- 深入理解css系列：meta标签
积累太少,时间管理技巧欠缺,所以导致了博客更新的速度迟缓.学习中成长,成长中学习.加油吧!最近在做h5的项目,对于meta标签层出不穷的各式属性值有点头晕,所以查资料整理了下. 关键字:meta na ...
- CSS系列，三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- 关于height:100%两三事
对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: div { he ...
- 【CSS系列】height:100%设置div的高度
一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...
- [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
随机推荐
- Linux 系统运行命令 > 查看系统信息
查看系统运行状态 一 . 查看硬件信息 - 1. cpu信息(可以通过find,whereis,locate查出路径) #cat /proc/cpuinfo 2 . 内存信息:meminfo(可以用c ...
- tensorFlow入门实践（一）
首先应用TensorFlow完成一个线性回归,了解TensorFlow的数据类型和运行机制. import tensorflow as tf import numpy as np import mat ...
- Hadoop Hive HBase Spark Storm概念解释
HadoopHadoop是什么? 答:一个分布式系统基础架构. Hadoop解决了什么问题? 答:解决了大数据(大到一台计算机无法进行存储,一台计算机无法在要求的时间内进行处理)的可靠存储(HDFS) ...
- Holer实现外网访问本地MySQL数据库
外网访问内网MySQL数据库 内网主机上安装了MySQL数据库,只能在局域网内访问,怎样从公网也能访问本地MySQL数据库? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装并启 ...
- wpf 事件
事件的本质是 系统消息 再winform中 消息被封装成了事件触发 这种就是 普通事件,特点就是 1对1,以及事件必须能访问到控件 才能绑定 在 wpf中 新概念 路由事件 ,路由区别是 不在是 ...
- （原创）Verilog三段式状态机
下面以上图一个简单的FSM说明三段式Verilog状态机范式: `timescale 1ns / 1ps module FSM( clk,rst_n, in1,in2, out1,out2, CS,N ...
- npm install报错npm ERR! Maximum call stack size exceeded解决
给npm降级或者升级 比如: 降级 : npm install -g npm@6.1.0 升级 : npm install -g npm 升级到最新版
- Java学习笔记(7)
File类用于处理文件和目录 isDirectory()用于检查当前对象是否目录,isFile()用于检查当前对象是否文件 构造File对象时,传入的路径不一定要求存在,要通过exists()方法判断 ...
- LoadRunner学习笔记（1）--异常处理方法
1.查看端口号占用情况 cmd -> netstat -ano 找到进程关闭后在重启网站 2.LR录制脚本时为何不弹出IE浏览器 启动浏览器,打开Internet选项对话框,切换到高级标签 ...
- Java前后端依赖
有时候我们的一个类需要依赖另外一个类,这种就是依赖关系,创建对象的工作一般由spring容器来完成然后注入给调用者,这种就是依赖注入. 代码可参考1227210565朋友空间 DispatcherSe ...