CSS中height 100%高度无效的原理解析

2019独角兽企业重金招聘Python工程师标准>>>

我们在body中定义一个div设置 width:100%;height:100%;background-color: #666666;用F12查看，发现div并没有铺满全屏，那么我们来解析下原因：

在css中因为父元素没高度，父元素的父元素也没高度，所以div也就没有高度，简单来说，块级元素的基本尺寸都是从父类元素继承过来的

div的父元素是body，我们查看body元素高度，发现也是0，那是因为body的父元素html没有高度，如果想要div，那么父元素body必须有高度，那么html必须设置高度：

            html,body{
				height: 100%;
			}
			.app{
				width: 100%;
				height: 100%;
				background-color: #666666;
			}

 

转载于:https://my.oschina.net/jishuge/blog/2966408