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

The height property is used to set the height of an element. The height property does not contains padding, margin and border of element. The height property contains many values which define the height of an element. The height property values are listed below:

Syntax:

height: length|percentage|auto|initial|inherit;

Property Values:

  • height: auto; It is used to set height property to its default value. If the height property set to auto then the browser calculates the height of element.
  • height: length; It is used to set the height of element in form of px, cm etc. The length can not be negative.
  • height: initial; It is used to set height property to its default value.
  • height: inherit; It is used to set height property from its parent element.

Example 1: This example use height: auto; property to display the content.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
      
    <!-- style to set height property to
            display content -->
    <style>
        p {
            color:white;
        }
        .main {
            background-color:black;
            height:auto;
            border-radius: 20px 20px 0px 0px;
        }
        .left-column {
            background-color:indigo;
            height:120px;
            width:49%;
            float:left;
            border-bottom-left-radius: 20px;
        }
        .right-column{
            background-color:green;
            height:7.5em;
            width:49%;
            float:right;
            border-bottom-right-radius: 20px;
        }
        h1{
            color:Green;
        }
    </style>
</head>
  
<body>
    <center>
      
    <h1>GeeksforGeeks</h1>
      
    <div class="main">
        <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>
  
    <div class="left-column">
        <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 class="right-column">
        <p>
            The course focuses on various MCQ's & Coding 
            question likely to be asked in the interviews
            & make your upcoming placement season efficient
            and successful.
        </p>
    </div>
    </center>
</body>
  
</html>                    

chevron_right


Output

Example 2: Thie example use height: inherit property to display the content.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
      
    <!-- CSS style to set height property of content -->
    <style>
        .auto {
            height:auto;
            background-color:orange;
        }
        .inherit {
            height:inherit;
            background-color:cyan;
        }
        .percentage {
            height:25%;
        }
        h1 {
            color:green;
        }
    </style>
</head>
  
<body style = "text-align:center;">
      
    <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 class="percentage">
            <p>
                The course focuses on various MCQ's & Coding 
                question likely to be asked in the interviews
                & make your upcoming placement season efficient
                and successful.
            </p>
        </div>
    </div
</body>
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : shubham_singh



Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.