高度

本笔记为学习张鑫旭的《CSS世界》时做的。

 

目录：

　　1. 让元素支持 height:100%效果

　　2. height: auto

　　3. 父元素 height:auto 时，子元素不支持 height:100%

　　4. 绝对定位的宽高百分比计算是相对于 padding box 的，非绝对定位元素则是相对于 content box 计算的

 

一、让元素支持 height:100% 效果

对于普通文档流中的元素，百分比高度值要想起作用， 其父级必须有一个可以生效的高度值！

举个例子：

　　预想通过设置 div 元素高度实现高度占满整个页面。给 div 元素设置高度为 100%，看页面表现发现高度没有设置成功。这是因为，给 div 元素设置高度为 100% 时，这个高度 100% 是相对父元素高度计算的，div 元素的父元素是 body，没有给 body 设置一个可以生效的高度值，所以给 div 元素设置高度为 100% 就会设置失败。如果要让这个 div 元素设置高度为 100% 设置成功，有两种方法，方法1：设定显式的高度值；方法2：使用绝对定位。

 

方法1：设定显式的高度值

　　因为想要 div 元素高度占满整个页面，所以给 div 元素的父元素 body 设置高度为 100%，同样，给 body 的父元素 html 设置高度为 100%。html 是最根的元素了，不需要再找父级。

 

方法2：使用绝对定位或固定定位

　　使用绝对定位，height: 100%; 设置成功。

　　 使用固定定位，height: 100%; 设置成功。

 

 

二、height: auto

1. height:auto，是指根据块内内容自动调节高度

当元素未设置高度值或者其高度值为 auto 时，元素的高度可以随内容的增加而增加。

举个例子:

　　给 div 元素设置 height 为 auto，div 元素的高度随内容的增加而增加。

 

 

 

2. 如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto

举个例子：

　　类名为 one 的 div 元素（以下简称为 one div）没有设置高度并且没有开启绝对定位，那么，one div 的 height 为 auto。因为 one div 的 height 为 auto，所以，它的高度由块内内容 two div 的高度决定，otwo div 的 height 为 100px，所以，one div 的 height 也为 100px。

 

 

三、父元素 height:auto 时，子元素不支持 height:100%

例子：

　　有 3 个 div 元素，分别给它们设置了高度，均不为 auto。此时，它们的高度都是有效的。

 　　如果给类名为 two 的 div 元素（以下简称为 two div）设置了 height:auto，three div 的高度会失效。

 

 

 

四、绝对定位的宽高百分比计算是相对于 padding box 的，非绝对定位元素则是相对于 content box 计算的

1. 绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内

举个例子：

　　one div 是 two div 的父元素，给 two div 开启绝对定位，让 two div 相对 one div 定位。给 one div 设置高度为 100px，内边距为 30px，那么 one div 的 padding box 的高度为 160px，给它的子元素 two div 设置高度为 100%，子元素 two div 因为开启了绝对定位，所以子元素 two div 的宽高百分比是相对于 padding box 的，父元素 one div 的 padding box 的高度为 160px，所以子元素 two div 的高度为 160px 乘 100%，也就是 160px。

 

2. 非绝对定位元素则相对于 content box 计算的

举个例子：

　　one div 是 two div 的父元素，one div 的 height 为 100px，内边距为 30px，它的 content box 高度为 100px。one div 的子元素 two div 的高度为 100%，因为 two div 是非绝对定位元素，所以 two div 的高度是相对于 content box 计算的，父元素 one div 的 content box 的高度为 100px，所以子元素 two div 的高度为 100px 乘 100%，也就是 100px。