The difference between height: 100% and height: auto, heightauto

The difference between height: 100% and height: auto, heightauto

I have never understood the difference between height: 100% and height: auto. Recently, height: 100%; overflow: hidden; has been used in front-end pages. However, some browsers have inexplicable and wonderful problems, however, if you change to height: auto, the problem has never been detailed.

Today, the same problem has emerged. Baidu gave a closer look and gave pointers to friends in the group, finally understood the truth and recorded it.

Height: auto, which automatically adjusts the height according to the content in the block.
Height: 100% refers to the height defined by height relative to the parent block, that is, the height defined by the height of the parent layer closest to it and with a defined height.