本文深入解析了在Vue项目中，当尝试将div高度设置为100%时遇到的问题及原因。通常，这源于html和body标签默认高度为auto，导致子元素高度无法正确继承。文章提供了在App.vue文件style中添加特定CSS样式的方法，确保html, body和#app三个关键元素的高度均为100%，从而解决了高度继承问题。
设置高度100%时，div的高度会等同于其父元素的高度。而上面中id为app的div（vue挂载的div）的父节点是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。
此时应该在App.vue文件style中添加如下代码：
html,body,#app{
height: 100%;
}
以上可解决高度100%不起作用的问题
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
