CODEWITHSUNDEEP
htmlcss
Rachel Dockter
Rachel Dockter

Reputation: 986

filling a full page div, minus padding on each side

I have an outer div thats the full page with 30px of padding and an inner div that i just want to fill the room so i will have a kind of floating box, equal on all sides.

When i set the inner div width and height to 100%, it takes 100% of the page instead of the div minus padding.

HTML: 

  <div class="fullscreen-page padding-container">
    <div id="inner">
    </div>
 </div>

CSS:

.fullscreen-page {
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}

.padding-container{
  padding: 30px;
}

#inner {
  background-color: white;
  width: 100%;
  height: 100%;
  margin: 0;
}

https://jsfiddle.net/Ltm43pax/

Upvotes: 0

Views: 679

Answers (2)

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Check Demo Here

Note: I believe border-box is the widely used value for box-sizing. Since you need not to worry about padding effects your actual width and height of your content. More you can read an article Here

Add this

CSS:

*{
    box-sizing: border-box;
}

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 192382

The standard box model (box-sizing: content-box) adds the padding to the current width height.

Remove the width: 100%, and height: 100% from .fullscreen-page, since you already get the width and height from the absolute position, and the top/right/bottom/left settings.

.fullscreen-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f4f4f4;
}

.padding-container {
  padding: 30px;
}

#inner {
  background-color: white;
  width: 100%;
  height: 100%;
  margin: 0;
}
<div class="fullscreen-page padding-container">
  <div id="inner">
  
  </div>
</div>

Upvotes: 2

Related Questions