填充整页 div，每边减去填充答案

【问题标题】：filling a full page div, minus padding on each side填充整页 div，每边减去填充
【发布时间】：2018-04-26 16:48:34
【问题描述】：

我有一个外部 div，它是带有 30 像素填充的整页和一个内部 div，我只想填满房间，所以我会有一个浮动框，四面都相等。

当我将内部 div 的宽度和高度设置为 100% 时，它会占用页面的 100% 而不是 div 减去填充。

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/

【问题讨论】：

标签： html css

【解决方案1】：

标准盒子模型 (box-sizing: content-box) 将填充添加到当前宽度高度。

从.fullscreen-page 中删除width: 100% 和height: 100%，因为您已经从absolute 位置和top/right/bottom/left 设置中获得了宽度和高度。

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

【讨论】：

【解决方案2】：

查看演示Here

注意：我相信border-box 是广泛使用的值 box-sizing。由于您不必担心填充效果内容的实际宽度和高度。更多您可以阅读文章 Here

添加这个

CSS：

*{
    box-sizing: border-box;
}

【讨论】：

@RachelDockter 欢迎您 :)