How to Set 100% Height with Padding/Margin in CSS ?

Last Updated : 11 Sep, 2023

In this article, we’ll explore CSS layouts with 100% width/height while accommodating padding and margins. In the process of web page design, it is often faced with scenarios where the intention is to have an element fill the entire width and/or height of its parent container, while also maintaining appropriate padding or margins. However, achieving this seemingly uncomplicated objective can sometimes be difficult.

We have a few approaches to get CSS 100% height with padding/margin that are discussed in detail below:

Using Box-sizing Property
Using position Property
Using the calc() Function

Approach 1: Using Box-sizing property

The box-sizing property controls an element’s box model size. By default, elements have a content-box value, where padding and margins add to the total width and height. To include padding and margins within the specified size, use the border-box value. When the box-sizing property is set to border-box, the dimensions of the element will encompass the padding and margins along with it.

Example: In this example, we are using the Box-sizing property to set width and height of 100% with padding/margin.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
      <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    
    <style> 
        .container { 
            height: 200px; 
            width: 300px; 
            border: 2px solid crimson; 
            border-radius: 5px; 
        } 
  
        .box { 
            box-sizing: border-box; 
            height: 100%; 
            width: 100%; 
            padding: 20px; 
            margin: 10px; 
            background-color: green; 
            color: white; 
            border-radius: 5px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="box"> 
            Welcome To Geeksforgeeks!! 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Screenshot-(214).png

Approach 2:Using position property

Set the parent container’s position to relative. Set the child element’s position to absolute and specify top, bottom, left, and right values of 0. Apply padding or margin to the child element.

Example:

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <style> 
        .container { 
            position: relative; 
            height: 100%; 
            padding: 40px; 
            margin: 20px; 
            border: 2px solid crimson; 
            border-radius: 5px; 
        } 
  
        .child { 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            background-color: green; 
            color: white; 
            border-radius: 5px; 
            padding: 20px; 
            margin: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="child"> 
            Welcome To Geeksforgeeks! 
        </div> 
    </div> 
</body> 
  
</html>

Output:

By Using Absolute Positioning:

Approach 3: Using the calc() function

Use the calc() function to get 100% height with padding and margin. To make sure the content fits within the designated space, set the height to calc(100% – (padding + margin)) to deduct the total padding and margin from the parent container’s height.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>CSS 100% Height with Padding/Margin</title> 
  
    <style> 
        html, 
        body { 
            height: 100%; 
            margin: 0; 
        } 
  
        .container { 
            height: calc(100% - 40px); 
            padding: 30px; 
            box-sizing: border-box; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container" 
         style="background-color: green;"> 
        <h1>calc() function</h1> 
        <p> 
              Here we are using the calc() function 
            to achieve 100% height with padding. 
        </p> 
    </div> 
</body> 
  
</html>