CSS属性之height

height与width大致是一样的，都是用来限制元素尺寸的，但是，它们在不少地方还是有明显区别的。这是因为CSS的默认渲染方式是水平方向的，宽度是有限的，而高度是无限的。因此高度的分配会根据浏览器差异和不同，高度就显得比较随意。

1.height:auto;

与width:auto;那么多讲究不同，height：auto;在正常情况下子元素多高，或者内容多高，它就多高。

如果子元素具有绝对定位或者浮动这表现会有不同，这需要看具体场景。

2.height:100%；

当你想要设置一张背景图充满整个页面时：

div{
   width:100%;/*多余*/
   hieght:100%;/*无效*/
   background:url(bg.jpg);
}

然后发现div的高度确实0，其实这是因为百分比高度值想要生效，其父级必须有一个可以生效的高度值！

此时你就需要加上：

html,body{
     height:100%;
}

为什么会出现这种情况呢？这是因为如果包含快即父元素的高度没有显示指定（高度由内容决定），并且该元素不是绝对定位，则计算值为auto。而‘auto’*100/100=NaN

当然还有一种方法可以使height生效，就是使用绝对定位：

div{
  height:100%;
  position:absolute;
}

文章参考张鑫旭《CSS世界》