深入理解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%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
随机推荐
- UIMediaScanner从相册读取资源的功能
iPhone的照片上传到了iCloud,本地的照片就被压缩,每当你要查看这些照片的时候就需要下载,不然上传的图片就是缩略图. //图片多张选择 function select_album(max, c ...
- web传输过程中的gzip压缩
最近在做项目的时候用到了gzip,发现它的压缩能力还是很强大的,基本能够压缩50%的文本文件大小.以前有所了解,但不够深入,现在详细了解下. 什么是gzip 在哪里使用gzip gzip对于不同类型文 ...
- 浏览器兼容性汇总--CSS篇
目录 CSS篇 1. cursor:hand VS cursor:pointer 2. innerText在IE中能正常工作,但在FireFox中却不行 3. ...
- iptables-save命令
[root@localhost ~]# iptables-save -t filter > iptables.bak [root@localhost ~]# cat iptables.bak # ...
- 运维seq语法
seq-print a sequence of numbers 用于产生从某个数到另外一个数之间的所有整数 语法:seq 开始列 指定步长 结束列 参数: -f :指定输出格式,允许使用print ...
- 微信小程序实际开发中学习
三个概念 微信:就是一个聊天工具 微信公众号:企业或个人用于管理其粉丝/用户的应用(类似于APP) 微信小程序:不需要下载安装直接可以使用的软件/应用/APP 小程序与公众号的区别: 定位不同(小程序 ...
- python_01
测试工程师的短板,近二年的时间,python这门语言获得非同一般的美誉.在算法,测试,运维里火的不要不要的.本人学了将近一年的时间,总是林林散散的学,也没有规划的去分析和总结.希望能够帮我梳理一下这一 ...
- element UI 下拉菜单滚动监听（vue指令）
直接看代码吧,可以直接粘贴此代码到你的编辑器中看效果. <template> <div class="page-component"> <div cl ...
- Vue中使用mui方法
第一步 下载 下载网址:http://dev.dcloud.net.cn/mui/ui/ 点击GitHub进行下载 第二步 Vue中引入Mui 将下载好的文件解压 把文件中dist中的三个文件复制到自 ...
- thinkphp5.0如何隐藏index.php入口文件
隐藏入口文件 public/index.php 同级的.htaccess文件 [ Apache ] 方法1: <IfModule mod_rewrite.c> Options +Follo ...