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 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s