{"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&#8217;s 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 &#8220;border&#8221; on all sides, nicely centered in the parent element.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">#myDiv <br\/>{<br\/>    width: 100%<br\/>    height: 100%;<br\/>    padding: 5px;<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li><b>EDIT: <\/b>Since an example was asked for,<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;html style=&quot;height: 100%&quot;&gt;<br\/>    &lt;body style=&quot;height: 100%&quot;&gt;<br\/>        &lt;div style=&quot;background-color: black; height: 100%; padding: 25px&quot;&gt;&lt;\/div&gt;<br\/>    &lt;\/body&gt;<br\/>  &lt;\/html&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.stretchedToMargin <br\/>{<br\/>  display: block;<br\/>  position:absolute;<br\/>  height:auto;<br\/>  bottom:0;  top:0;  left:0;  right:0;<br\/>  margin-top:20px;<br\/>  margin-bottom:20px;<br\/>  margin-right:80px;<br\/>  margin-left:80px;<br\/>  background-color: green;<br\/>}<\/code><\/pre> <\/div>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;stretchedToMargin&quot;&gt;<br\/>  Hello, world<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\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&#8217;s called box-sizing.<\/li>\n<li>By setting this property with the value &#8220;border-box&#8221; 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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">-webkit-box-sizing: border-box;<br\/>   -moz-box-sizing: border-box;<br\/>        box-sizing: border-box;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">.box <br\/>{<br\/>margin:8px; position:absolute; top:0; left:0; right:0; bottom:0<br\/>}<br\/>&lt;div class=&quot;box&quot; style=&quot;background:black&quot;&gt;<br\/>  &lt;div class=&quot;box&quot; style=&quot;background:green&quot;&gt;<br\/>    &lt;div class=&quot;box&quot; style=&quot;background:lightblue&quot;&gt;<br\/>This will show three nested boxes. Try resizing browser to see they remain nested properly.<br\/>    &lt;\/div&gt;<br\/>  &lt;\/div&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">#myDiv <br\/>{<br\/>    width: calc(100% - 5px);<br\/>    height: calc(100% - 5px);<br\/>    padding: 5px;<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>Just make sure you don&#8217;t 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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.fullWidthPlusMargin <br\/>{<br\/>    width: 98%;<br\/>    margin: 1%;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>Here&#8217;s an example where the child &#8211; given padding and a border &#8211; uses absolute positioning to fill the parent 100%. The parent uses relative positioning in order to provide a point of reference for the child&#8217;s position while remaining in the normal flow &#8211; the next element &#8220;more-content&#8221; is not affected:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">#box <br\/>{<br\/>    position: relative;<br\/>    height: 300px;<br\/>    width: 600px; <br\/>}<br\/>#box p <br\/>{<br\/>    position: absolute;<br\/>    border-style: dashed;<br\/>    padding: 1em;    top: 0;    right: 0;    bottom: 0;<br\/>    left: 0;<br\/>}<br\/>&lt;div id=&quot;box&quot;&gt;<br\/>  &lt;p&gt;100% height and width!&lt;\/p&gt;<br\/>&lt;\/div&gt;<br\/>&lt;div id=&quot;more-content&quot;&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Full height with padding<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">body <br\/>{<br\/>  margin: 0;<br\/>}<br\/>.container <br\/>{<br\/>  min-height: 100vh;<br\/>  padding: 50px;<br\/>  box-sizing: border-box;<br\/>  background: silver;<br\/>}<br\/>&lt;div class=&quot;container&quot;&gt;Hello world.&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>Full height with margin<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">body <br\/>{<br\/>  margin: 0;<br\/>}<br\/>.container <br\/>{<br\/>  min-height: calc(100vh - 100px);<br\/>  margin: 50px;<br\/>  background: silver;<br\/>}<br\/>&lt;div class=&quot;container&quot;&gt;Hello world.&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>Full height with border<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">body <br\/>{<br\/>  margin: 0;<br\/>}<br\/>.container <br\/>{<br\/>  min-height: 100vh;<br\/>  border: 50px solid pink;<br\/>  box-sizing: border-box;<br\/>  background: silver;<br\/>}<br\/>&lt;div class=&quot;container&quot;&gt;Hello world.&lt;\/div&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;style type=&quot;text\/css&quot;&gt;<br\/>.stretchedToMargin <br\/>{<br\/>    position:absolute;<br\/>    width:100%;<br\/>    height:100%;<br\/><br\/>}<br\/>&lt;\/style&gt;<\/code><\/pre> <\/div>\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&#8217;s 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 &#8220;border&#8221; 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}]}}