深入理解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%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
随机推荐
- Java Script--------问题错误解决意外的终止输入Uncaught SyntaxError: Unexpected end of input解决办法
错误信息: Uncaught SyntaxError: Unexpected end of input 错误原因: 一般是成对的符号只出现了单只,比如说“”,‘’,{},[]. 解决办法:检查符号是否 ...
- eclipse Android项目 DDMS db文件 导出 Failed to pull selection null 问题
我在 eclipse的Android项目中,在 DDMS导出db文件 时,发现报错:Failed to pull selection null 在左侧选中设备,在进行导出 这样就可以正常的进行导出db ...
- Linux安装软件、python开发环境
软件安装与卸载 更新Ubuntu软件下载地址 1. 寻找国内镜像源 所谓的镜像源:可以理解为提供下载软件的地方,比如Android手机上可以下载软件的91手机助手:iOS手机上可以下载软件的AppSt ...
- Blinn-Phong模型
最近在看基础光照模型,比较感兴趣的是高光反射模型,有下列两种: 1.Phong模型 R = 2*N(dot(N, L)) - L specular = lightColor * SpecularCol ...
- mybatis(3)---传参数的方法
1.传一个参数 //接口方法List<EmpVo> find(int empId); //xml配置 <select resultType="com.ht.mapper.E ...
- this与super
this是引用,表示当前对象,堆中每一个对象都有this,保存的地址指向自身:super不是引用,是表示当前对象的父类特征. this可以使用在构造方法中,即this(..),必须出现在代码第一行,代 ...
- RF新手常见问题总结
RF新手常见问题总结--(基础篇) 1. 经常有人问这个元素找不到,一般先排除这两个地方,再自己找找A:是否等待了足够的时间让元素加载 (增加sleep xx, wait Until xxx)B: ...
- iOS跳转第三方应用举例一号店和京东
1.首先要跳转到第三方应用都需要知道第三方应用的scheme,虽然百度能得到很多,但是不乏一些新增的或者改了的,怎么获得APP的scheme,鉴于现在iTunes不好用了,介绍一个app ---app ...
- python学习笔记——（一）基础设置
python的学习,今天就开始上开发环境Pycharm,这样以后在调试,使用和学习起来就方便很多. 我用的是JetBrains PyCharm Community Edition 2018.1.1 x ...
- How to Animate UILabel textColor Properties
How to Animate UILabel Properties UILabel properties cannot be easy animated due to some various rea ...