Open In App

How to make div height expand with its content using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 

lkj

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: 

mnb



Last Updated : 24 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads