高度height的百分比相对于父元素的高度，父元素默认是没有高度的 。如果不给父元素一个高度，子元素也不会有高度。在普通文档流中，块级元素的宽度默认是浏览器的宽度，因此百分比有效。也就是为什么子元素有宽度而没有高度。padding-bottom 和padding-top 的百分比是相对于父元素的宽度，而不是高度。因此设置了padding-top 或者padding-bottom 百分比的子元素，其高度就不再依赖于父元素高度了。由于padding-bottom 和padding-top 的百分比是相对于父元素的宽度，当屏幕大小出现变化时，元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。

百分比宽度和百分比高度表现不一样，是与浏览器的渲染机制有关。

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。

如果你不设置块级宽度值，那浏览器会自动将页面内容平铺填满整个横向宽度。（即块级元素的宽度），此时widh:auto.

因为页面根元素的html元素的高度为auto(实际上为0)，body的height也为0，所以，当你让一个元素的高度设定为百分比高度时，父级的高度如果是auto，那你的子级设置%高度，就无法取到实际值。

如果 你非得想叫子级用height,那么你可以设置父级的height:100vw，即父级高度是屏幕的宽度，从而实现百分比自适应，

至于padding-top或padding-bottom为什么起作用，上面的师兄已经解释了，我就不赘述了。

点赞

如果使用百分比的话这个div的宽和高都是根据它的父级元素来决定的，它的父级元素的宽和高不同，所以这个div的宽和高就不一样，你尝试这用vw试一下。

你可以尝试一下页面百分比。VW或者VH