Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to stretch div to fit the container ?

  • Last Updated : 06 Apr, 2021

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 tat are discussed below:

Method 1: 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Consider this HTML for demonstration:

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 to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :