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 w3wiki! </div> </div> </body> </html> |
Output:
By Using Absolute Positioning:
How to Set 100% Height with Padding/Margin in CSS ?
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