What is the difference between height:100% and height:auto?

I have never understood the difference between height:100% and height:auto. Recently, I have used height:100%;overflow:hidden; when making front-end pages, but some browsers have inexplicable and wonderful problems. But just change it to height:auto. Baidu has never looked into this problem in detail.

The same problem came up again today. After a closer look at Baidu and the guidance of friends in the group, I finally understood the reason and recorded it.

height:auto refers to automatically adjusting the height according to the content in the block.
height:100% refers to the height defined relative to the height of the parent block, that is, the height is defined based on the height of the parent layer that is closest to it and has a defined height.

auto expands according to the height of the content. 100% is determined based on the height of the parent element. For example:

<div style="height:100px;width:200px;">      <div style="height:auto;width:100px;float:left;">
这个容器的高度是随里面的内容的高度而定
</div>

<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px</div> </div>

For example, a table is inside another table. If the height of the outside table is 100 and the inside table is auto, if there is nothing in the table, it will have no height. The content inside the table is How high it is, and when it is 100%, regardless of whether there is content inside, it will be the same height as the outside table

The above is the detailed content of What is the difference between height:100% and height:auto?. For more information, please follow other related articles on the PHP Chinese website!