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 🙂
