深入理解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%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
随机推荐
- MySQL行转列、列转行
一.行转列 有如图所示的表,现在希望查询的结果将行转成列 建表语句如下: CREATE TABLE `TEST_TB_GRADE` ( `ID` int(10) NOT NULL AUTO_INCRE ...
- 团队作业4——beta冲刺
beta冲刺准备 冲刺准备 5天冲刺博客 Beta冲刺一 Beta冲刺二 Beta冲刺三 Beta冲刺四 Beta冲刺五 用户使用报告 用户使用用报告 冲刺总结 冲刺总结随笔 项目码云地址 码云地址
- cocos Studio使用问题
使用的时候最好是同一套资源饭在一个文件夹下,或者新建的文件和资源类,一个资源分一个产生的层文件
- JS属性修改
document.getElementById('p1').style.visibility='visible' document.getElementById('p1').style.visibil ...
- 使用bitsadmin.exe 下载文件,配合bcn.bat玩出更多的花样~~
bitsadmin的简单介绍与基本用法: bitsadmin.exe 可以用来在windows 命令行下下载文件.bitsadmin是windows 后台智能传输服务的一个工具,windows 的自动 ...
- render函数（转）
https://blog.csdn.net/qq78827534/article/details/80792514
- EF简单的CURD操作
/// <summary> /// EF添加数据 /// </summary> /// <param name="sender"></pa ...
- xargs处理来之STDIN的输入
xargs能够将标准输入进行处理,配合下一个命令进行批量处理 #example grep -f go.test ~/jqyou/genedhs_10D |sed '/-1$/d' |awk '{pri ...
- python之三级目录
#python之三级目录低配版 menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{ }, 'HP':{ }, '渣打银行':{ }, 'CCTV':{ }, }, '望京': ...
- C++入门程序作业1
将一个int A[]={ , , ,}定义的可能重复的数字去掉重复的元素. 了解向量,容器如何使用,size,地址的关系,理解unique erase函数的返回值是什么参数 结果:将1,1,1,2 ...