CSS HTML

[Solved – 10 Answers] CSS 100% height with padding/margin

  • With HTML/CSS how to make an element that has a width and/or height that is 100% of it’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 “border” on all sides, nicely centered in the parent element.
CSS CODE
#myDiv 
{
    width: 100%
    height: 100%;
    padding: 5px;
}
  • EDIT: Since an example was asked for,
html code
<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
  </html>
  • 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.

  • 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.
css code
.stretchedToMargin 
{
  display: block;
  position:absolute;
  height:auto;
  bottom:0;  top:0;  left:0;  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
html code
<div class="stretchedToMargin">
  Hello, world
</div>

  • There is a new property in CSS3 that you can use to change the way the box model calculates width/height, it’s called box-sizing.
  • By setting this property with the value “border-box” 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.
css code
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

  • Attach the inner box using top, left, right, bottom and then add margin.
html code
.box 
{
margin:8px; position:absolute; top:0; left:0; right:0; bottom:0
}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

  • The better way is with the calc() property.
css code
#myDiv 
{
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}
  • Just make sure you don’t forget the space between the values and the operator (eg (100%-5px) that will break the syntax.
READ  [Solved – 3 Answers] Set Html body have 100% of the browser height

  • Another solution: You can use percentage units for margins as well as sizes.

For example:

css code
.fullWidthPlusMargin 
{
    width: 98%;
    margin: 1%;
}

  • Here’s an example where the child – given padding and a border – uses absolute positioning to fill the parent 100%. The parent uses relative positioning in order to provide a point of reference for the child’s position while remaining in the normal flow – the next element “more-content” is not affected:
css code
#box 
{
    position: relative;
    height: 300px;
    width: 600px; 
}
#box p 
{
    position: absolute;
    border-style: dashed;
    padding: 1em;    top: 0;    right: 0;    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

  • Full height with padding
css code
body 
{
  margin: 0;
}
.container 
{
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>

  • Full height with margin
css code
body 
{
  margin: 0;
}
.container 
{
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>

  • Full height with border
css code
body 
{
  margin: 0;
}
.container 
{
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>

  • This is one of the solution :
css code
<style type="text/css">
.stretchedToMargin 
{
    position:absolute;
    width:100%;
    height:100%;

}
</style>

About the author

Venkatesan Prabu

Venkatesan Prabu

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment