CSS Width 100% Height 100% issue with paddings!

Explanation and Solution:

Sometime, which tends to happen very often, we need to create an element which is 100% in terms of both width and height however with the padding it ends up being bigger than 100%. Let’s say we have an element 100% and a padding 10px on all sides. CSS does not work well if we just write width: 100% – 10px but I have a quick and easy solution to this. There is a CSS3 property that allows you to consider the padding as part of the width and height set. This CSS3 property is called box-sizing which basically calculated the width assuming the padding is included within the width / height set.

This would mean:  

width + padding = 100%

height + padding = 100%

 

CSS Code Sample:

.myElement{

width: 100%;

height: 100%;

padding: 10px;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox */

box-sizing: border-box; /* Opera/IE 8+ */

}

 

Enjoy 🙂