Question

我有一个外部div，整个页面有30px的填充和一个内部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/

Answer 1

标准框模型（box-sizing: content-box）将填充添加到当前宽度高度。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

检查演示Here

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

添加此

CSS：

*{
    box-sizing: border-box;
}

填写整页div，每边减去填充

2 个答案: