前端父元素的height是auto，子元素怎么高度100%取不到高度怎么办呢？

Posted 2023-04-24

父层元素需要设置高度值，子层元素百分比高度都是相对于父层的。
也可以使用最新的vh,vw单位，相对于页面高度和宽度的百分比进行设置。
还可以使用js动态获取父层元素的高度并设置父层元素固定的高度，或者设置子层元素的百分比高度。 参考技术A 父元素如果是不设置高度的话，那么父元素的会取决于子元素的高度，你的子元素现在是没有高度的，那么父元素也没有高度。所以根本取不到高度。 参考技术B 父元素要设置高度里面的100%才起作用

height 100%

1.如果不给定元素宽高，浏览器默认分配高度是0px，宽度是浏览器<bower>宽度。
2.浏览器是由DOM树由上至下执行的。自身属性指定的值优先，但不包含继承性质的。如百分比%
（1）如果父元素没有设置相关属性，子元素设置height 100%, 则父、子元素实际高度为0
（2）如果子元素没有设置相关属性，父元素设置height 100%, 则父元素为文档高度，子元素为0
注意：有时候我们看到父、子元素高度为0，但显示正常，是子元素高度，即文档高度。是一种溢出的现象。
通常正确的写法是html,body{width:100%;height:100%}
3.背景图片不能overflow：hidden，但可以设置为百分比和大小