• 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>
[ad type=”banner”]
  • 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>
[ad type=”banner”]

  • 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.

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

For example:

css code 
.fullWidthPlusMargin 
{
    width: 98%;
    margin: 1%;
}
[ad type=”banner”]

  • 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>
[ad type=”banner”]

  • 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>

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , ,