【CSS】height:100%

高度设置为100%不起效，为啥呢？

<div class="main">
  <div class="pos"> hehdhdhdh </div>
</div>
<style>
.pos{
  width: 100%;
  height: 100%;
}
</style>

浏览器渲染的基本操作:

浏览器首先下载文档内容，加载头部的样式资源，然后按照从上倒下，从外到内的顺序渲染dom内容。套用本例就是先渲染父元素，在渲染子元素。

对于width来说，当渲染父元素的时候，子元素的width:100%,并未被渲染，等渲染子元素的时候父元素的宽度已经固定，如果宽度不够，溢出就好了，overflow 属性就是为此而生的。

那么宽都可以，为什么高就不行呢。规范给出了答案：如果包含块的高度没有显式指定，且该元素不是绝对定位，那么则计算值为auto

显然auto和百分比计算，肯定是算不了的。

但是宽度的解释为：如果包含块的宽度取决于该元素的宽，那么产生该元素的布局在CSS2.1中是未定义的。规范没有明确，那么就由浏览器自由发挥。

既然原因找到了，问题相应的也就解决了。

<div>
  <div> hehdhdhdh </div>
</div>
<style>
html, body {
  height: 100%;
}
.main {
  height: 100%;
}
.pos{
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

几点说明

• 一个元素的高度设定为百分比时，是相对父元素的高度来计算的：
  若未给父元素设置height或设置height百分比不生效时，浏览器会根据子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己的高度。 换句话说，若父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这个缺省值来计算百分比高度时，只能得到undefined

• html 的父元素可以理解成window，浏览器会将html填充完一个浏览器窗口。①html的height若为具体像素值，当其值大于浏览器窗口时，浏览器出现滚动条，当其值小于浏览器窗口时，同样会将html填充完整个浏览器窗口（可以设置背景测试）。②html的height为百分比时，当其值大于100%出现滚动条，小于100%同样会将html填充完整个浏览器窗口。③但html的子元素的高度设置成百分比时，会按照html设置的高度值计算比例。

• body的设置的高度小于浏览器窗口时，同样会填充满整个浏览器窗口（可以设置背景测试），但是其子元素的高度设置成百分比时，会按照body设置的高度值来计算比例。