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.
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:
Please Login to comment...