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

2019-08-08 16:01:41 浏览数 (1)

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

这个问题该怎么解决?

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

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

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

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

0 人点赞