CSS HTML

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

March 22, 2017 2 Min Read

128 0

PROBLEM:

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.

SOLUTION 1:

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>

SOLUTION 2:

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;

SOLUTION 3:

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”]

SOLUTION 4:

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.

SOLUTION 5:

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”]

SOLUTION 6:

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>

SOLUTION 7:

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>

SOLUTION 8:

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”]

SOLUTION 9:

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>

SOLUTION 10:

This is one of the solution :

css code

<style type="text/css">
.stretchedToMargin 
{
    position:absolute;
    width:100%;
    height:100%;

}
</style>

Tags:

.outerHeight()css - Height div 100% with a padding css - Margin Top 100% - Height of Parent Div CSS 100% height with padding/margin css height 100 of parent CSS height 100% with margin css margin percentage css padding percentage CSS: Stretching correctly with 100%css3 box-sizing cuisinart css-100 height padding nova launcher height width html - CSS full height div with margin?html - div 100% height with 40px bottom margin HTML CSS Box with padding and margin and 100% width?padding bottom 100%

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

Tags:

Wikitechy Editor

Other Articles

What is the difference between bindParam and bindValue

Get current URL in web browser – JAVA

No Comment! Be the first one.

Leave a Reply

Popular Posts

Download Huawei P9 Lite Android Nougat Update [B336]

How to Install TWRP Recovery and Root Mi5s & Mi5s Plus

How to Downgrade Honor 5c from Nougat to Marshmallow

Download ZTE Axon 7 Android 7.1 Nougat Update (MiFavor 4.2)(B13)

Categories

Related Posts

How do I start learning HTML for Beginners?

C Programming – Vertex Cover Problem | Set 1 (Introduction and Approximate Algorithm)

How to Modify the URL without reloading the page

Type and hit Enter to search

Type and hit Enter to search

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

Tags:

Share Article

Other Articles

No Comment! Be the first one.

Leave a Reply

Popular Posts

Categories

Related Posts