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

20 Dec, 2021
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.  
html
<!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>                   
Output 
Example 2: This example use height: inherit property to display the content.  
html
<!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>                   
Output: 
shubham_singh
anikaseth98
CSS-Misc
Picked
Web-Programs
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?