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 >GeeksforGeeks</ h1 >
< div class = "main" >
< p >
Also, any geeks can help other geeks by writing
articles on the GeeksforGeeks, 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 >GeeksforGeeks</ h1 >
< div class = "auto" >
< p >
Also, any geeks can help other geeks by writing
articles on the GeeksforGeeks, 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: