How to make div height expand with its content using CSS ?
To make a div’s height adapt to its content using CSS, use `height: auto;` or skip setting a fixed height. This ensures the div adjusts dynamically to different content sizes, promoting a flexible layout. Avoid conflicting styles that might restrict the height, allowing you to create a responsive design that seamlessly accommodates diverse content within the div.
Syntax:
height: length | percentage | auto | initial | inherit;
Property Values:
Property Value | Description |
---|---|
auto | Sets the height property to its default value. The browser calculates the height of the element automatically based on its content and other factors. |
length | Sets the height of the element using a specific length unit (e.g., pixels, centimeters). The length cannot be negative. |
initial | Sets the height property to its default value. |
inherit | Inherits the height property from its parent element. |
Example 1: Implementation using height: auto; property to display the content.
html
<!DOCTYPE html> < html > < head > < title >To make div height expand with its content</ title > < style > h1 { color: Green; } .main { background-color: black; height: auto; width: 50%; border-radius: 10px; } p { color: white; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < div class = "main" > < p > Also, any Beginner can help other Beginner by writing articles on the w3wiki, publishing articles < br > follow few steps that are Articles that need little modification/improvement from reviewers < br > are published first. To quickly get your articles reviewed, please refer existing articles, their < br > formatting style, coding style, and try to make you are close to them. </ p > </ div > </ body > </ html > |
Output
Example 2: This example uses height: inherit property to display the content.
html
<!DOCTYPE html> < html > < head > < title >To make div height expand with its content</ title > < style > body { text-align: center; } h1 { color: green; } .auto { height: auto; background-color: orange; } .inherit { height: inherit; background-color: cyan; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < div class = "auto" > < p > Also, any Beginner can help other Beginner by writing articles on the w3wiki, publishing articles follow few steps that are Articles that need little modification/improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. </ p > < div class = "inherit" > < p > It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </ p > </ div > </ div > </ body > </ html > |
Output: