How to stretch div to fit the container ?
A child div inside a container can be made to take the complete width and height of the parent div. There are two methods to stretch the div to fit the container using CSS that are discussed below:
Method 1: The first method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div.
Example: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html><html lang="en"><head> <style> .container { height: 400px; background-color: green; } .num1 { background-color: yellow; height: 100%; width: 100%; } </style></head><body> <div class="container"> <div class="num1"> Welcome to GFG. </div> </div></body></html> |
Output:
Method 2: We can make the display attribute of the child container into a table row and display the attribute of the parent container to the table, which will take all the height available from the parent div element. To cover all the width, we can make the width of the parent div 100%.
Example:in this example, we use the above-explained method.
HTML
<!DOCTYPE html><html lang="en"><head> <style> .container { height: 200px; background-color: green; display: table; width: 100%; } .num1 { background-color: greenyellow; display: table-row; } </style></head><body> <div class="container"> <div class="num1"> Welcome to GFG. </div> </div></body></html> |
Output:
Please Login to comment...