div高度设置100%无效的问题

今天遇到一个问题，给div设置高度 height: 100%;却没有生效，在f12审查元素的时候可以看到高度字占据了半屏，并没有占据100%全屏，也就是说，div高度设置100%无效。

这个问题该怎么解决?

记录一下解决办法: 找到div的父级元素，并且给父级元素手动设置一个高度，这个问题就解决了。

错误原因，根本在于没有浏览器是计算元素高度和宽度的原理：

Web浏览器在计算有效宽度时会自动将页面内容平铺填满整个横向宽度。
但是浏览器根本就不计算内容的高度，
当一个元素的高度设定为百分比高度时，
无法根据获取父元素的高度，也就无法计算自己的高度。

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。