This blog will differentiate between CSS “height: 100%” and “height: auto”.
How Does “height: 100%” Work in HTML?
Defining any number of percentages as the height of the child element will adjust the height accordingly. So, a 100% height will set the height of the child element in such a way that it fully covers the area of the parent element. For instance, setting the “height” of the child element to “50%” (height: 50%) will set the height of the child element as half of its parent element.
Example: Applying “height: 100%” Property to an Image
Let’s understand the application of height: 100% in an HTML code:
In the above code snippet:
- For the div element, the CSS height property value is defined as “200px”.
- Inside the div, there is an “img” element set as the child element of the above div container element. Its height is set to “100%” (height: 100%). This means that the height of the image will be set according to the pixel value defined in the parent div container, i.e., “200px”.
This will generate the following output:
Now, if we change the value of the height property in the parent div element (For instance, from 200px to 300px), it will set the size of the image to “300px”:
This will change the image height to “300px” and the image will be displayed like this:
How Does the “height: auto” Property Work in HTML?
The “height: auto” property sets the height of the child element to the value defined in that child element. For instance, if there is a parent element that has the height “300px” and it has a child element with “height: auto”. Then, inside that element (containing “height: auto”), all the child elements will have the height according to the definition. More specifically, the child element will not inherit the value from the parent element.
Example: Applying “height: auto” Property to an Image
Let’s understand this with a simple HTML code snippet example:
In the above code snippet:
- Here, we have added a div container element with the style attribute and inline CSS property as “height: 300px”.
- Inside the div container element, there is another div container with the CSS style property set as “auto”.
- Inside the second div element, an “img” element is added (child of the above div element). It has the style attribute with the height property with the value set to “250px”.
- This means that the height of the image will be set to “250px” because its parent element has “height: auto”.
Output
Now, if we change the value of the “height” property of the child div, it will also change the height of the image in the output accordingly:
This will set the height of the image as “150px” in the output:
This sums up the difference between CSS “height:100%” Vs “height: auto”.
Conclusion
The CSS “height: 100%” sets the height of the element exactly as that defined in its parent element. On the other hand, when the “height: auto” is used in an element, it sets the height of its child elements as defined in the child elements and it does not inherit the height from the parent element. This post discussed the difference between CSS “height: 100%” and the “height: auto”.
