{"id":1711,"date":"2017-03-22T18:29:53","date_gmt":"2017-03-22T12:59:53","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1711"},"modified":"2017-03-28T18:52:16","modified_gmt":"2017-03-28T13:22:16","slug":"css-100-height-padding-margin","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/css-100-height-padding-margin\/","title":{"rendered":"[Solved &#8211; 10 Answers] CSS 100% height with padding\/margin"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM:<\/label><\/p>\n<ul>\n<li>With HTML\/CSS how to make an element that has a width and\/or height that is 100% of it\u2019s parent element and still has proper padding or margins?<\/li>\n<li>The parent element is 200px tall and we specify 100% height with 5px padding we expect to get a 190px high element with 5px \u201cborder\u201d on all sides, nicely centered in the parent element.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23myDiv%20%0A%7B%0A%20%20%20%20width%3A%20100%25%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20padding%3A%205px%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li><b>EDIT: <\/b>Since an example was asked for,<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Chtml%20style%3D%22height%3A%20100%25%22%3E%0A%20%20%20%20%3Cbody%20style%3D%22height%3A%20100%25%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22background-color%3A%20black%3B%20height%3A%20100%25%3B%20padding%3A%2025px%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%3C%2Fhtml%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<ul>\n<li>The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>The display:block is the default display value for the div. The container has to be the right type; position attribute is fixed, relative, or absolute.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.stretchedToMargin%20%0A%7B%0A%20%20display%3A%20block%3B%0A%20%20position%3Aabsolute%3B%0A%20%20height%3Aauto%3B%0A%20%20bottom%3A0%3B%20%20top%3A0%3B%20%20left%3A0%3B%20%20right%3A0%3B%0A%20%20margin-top%3A20px%3B%0A%20%20margin-bottom%3A20px%3B%0A%20%20margin-right%3A80px%3B%0A%20%20margin-left%3A80px%3B%0A%20%20background-color%3A%20green%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22stretchedToMargin%22%3E%0A%20%20Hello%2C%20world%0A%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>There is a new property in CSS3 that you can use to change the way the box model calculates width\/height, it\u2019s called box-sizing.<\/li>\n<li>By setting this property with the value \u201cborder-box\u201d it makes whichever element you apply it to not stretch when you add a padding or border. If you define something with 100px width, and 10px padding, it will still be 100px wide.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d-webkit-box-sizing%3A%20border-box%3B%0A%20%20%20-moz-box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>Attach the inner box using top, left, right, bottom and then add margin.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d.box%20%0A%7B%0Amargin%3A8px%3B%20position%3Aabsolute%3B%20top%3A0%3B%20left%3A0%3B%20right%3A0%3B%20bottom%3A0%0A%7D%0A%3Cdiv%20class%3D%22box%22%20style%3D%22background%3Ablack%22%3E%0A%20%20%3Cdiv%20class%3D%22box%22%20style%3D%22background%3Agreen%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22box%22%20style%3D%22background%3Alightblue%22%3E%0AThis%20will%20show%20three%20nested%20boxes.%20Try%20resizing%20browser%20to%20see%20they%20remain%20nested%20properly.%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>The better way is with the calc() property.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23myDiv%20%0A%7B%0A%20%20%20%20width%3A%20calc(100%25%20-%205px)%3B%0A%20%20%20%20height%3A%20calc(100%25%20-%205px)%3B%0A%20%20%20%20padding%3A%205px%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>Just make sure you don\u2019t forget the space between the values and the operator (eg (100%-5px) that will break the syntax.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>Another solution: You can use percentage units for margins as well as sizes.<\/li>\n<\/ul>\n<p><b>For example:<\/b><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d.fullWidthPlusMargin%20%0A%7B%0A%20%20%20%20width%3A%2098%25%3B%0A%20%20%20%20margin%3A%201%25%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>Here\u2019s an example where the child \u2013 given padding and a border \u2013 uses absolute positioning to fill the parent 100%. The parent uses relative positioning in order to provide a point of reference for the child\u2019s position while remaining in the normal flow \u2013 the next element \u201cmore-content\u201d is not affected:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23box%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20height%3A%20300px%3B%0A%20%20%20%20width%3A%20600px%3B%20%0A%7D%0A%23box%20p%20%0A%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20border-style%3A%20dashed%3B%0A%20%20%20%20padding%3A%201em%3B%20%20%20%20top%3A%200%3B%20%20%20%20right%3A%200%3B%20%20%20%20bottom%3A%200%3B%0A%20%20%20%20left%3A%200%3B%0A%7D%0A%3Cdiv%20id%3D%22box%22%3E%0A%20%20%3Cp%3E100%25%20height%20and%20width!%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22more-content%22%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Full height with padding<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbody%20%0A%7B%0A%20%20margin%3A%200%3B%0A%7D%0A.container%20%0A%7B%0A%20%20min-height%3A%20100vh%3B%0A%20%20padding%3A%2050px%3B%0A%20%20box-sizing%3A%20border-box%3B%0A%20%20background%3A%20silver%3B%0A%7D%0A%3Cdiv%20class%3D%22container%22%3EHello%20world.%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>Full height with margin<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbody%20%0A%7B%0A%20%20margin%3A%200%3B%0A%7D%0A.container%20%0A%7B%0A%20%20min-height%3A%20calc(100vh%20-%20100px)%3B%0A%20%20margin%3A%2050px%3B%0A%20%20background%3A%20silver%3B%0A%7D%0A%3Cdiv%20class%3D%22container%22%3EHello%20world.%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>Full height with border<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbody%20%0A%7B%0A%20%20margin%3A%200%3B%0A%7D%0A.container%20%0A%7B%0A%20%20min-height%3A%20100vh%3B%0A%20%20border%3A%2050px%20solid%20pink%3B%0A%20%20box-sizing%3A%20border-box%3B%0A%20%20background%3A%20silver%3B%0A%7D%0A%3Cdiv%20class%3D%22container%22%3EHello%20world.%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>This is one of the solution :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A.stretchedToMargin%20%0A%7B%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20width%3A100%25%3B%0A%20%20%20%20height%3A100%25%3B%0A%0A%7D%0A%3C%2Fstyle%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: With HTML\/CSS how to make an element that has a width and\/or height that is 100% of it\u2019s parent element and still has proper padding or margins? The parent element is 200px tall and we specify 100% height with 5px padding we expect to get a 190px high element with 5px \u201cborder\u201d on all [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[3664,3657,3662,3656,65,3658,3667,3668,3663,3666,3671,3669,3670,3660,3659,3661,3665],"class_list":["post-1711","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-outerheight","tag-css-height-div-100-with-a-padding","tag-css-margin-top-100-height-of-parent-div","tag-css-100-height-with-paddingmargin","tag-css-height-100-of-parent","tag-css-height-100-with-margin","tag-css-margin-percentage","tag-css-padding-percentage","tag-css-stretching-correctly-with-100","tag-css3-box-sizing","tag-cuisinart-css-100","tag-height-padding-nova-launcher","tag-height-width","tag-html-css-full-height-div-with-margin","tag-html-div-100-height-with-40px-bottom-margin","tag-html-css-box-with-padding-and-margin-and-100-width","tag-padding-bottom-100"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1711"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1711\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}