Html 填充整页div，减去每边的填充

我有一个外分区，它是一整页，有30像素的填充，还有一个内分区，我只想填满房间，所以我会有一个浮动框，两边相等

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

HTML:

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

查看演示

注：我相信

边框框

是

框大小调整

。因为你不必担心填充效果 内容的实际宽度和高度。你可以读更多的文章

加上这个

CSS:

检查演示

注：我相信

边框框

是

框大小调整

。因为你不必担心填充效果 内容的实际宽度和高度。你可以读更多的文章

加上这个

CSS:

标准长方体模型（）将填充添加到当前宽度高度

从

全屏页面

中删除

宽度：100%

和

高度：100%

，因为您已经从

绝对

位置以及

上/右/下/左

设置中获得了宽度和高度

。全屏页面{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：#F4；
}
.填充容器{
填充：30px；
}
#内在的{
背景色：白色；
宽度：100%；
身高：100%；
保证金：0；
}

标准长方体模型（）将填充添加到当前宽度高度

从

全屏页面

中删除

宽度：100%

和

高度：100%

，因为您已经从

绝对

位置以及

上/右/下/左

设置中获得了宽度和高度

。全屏页面{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：#F4；
}
.填充容器{
填充：30px；
}
#内在的{
背景色：白色；
宽度：100%；
身高：100%；
保证金：0；
}

@Racheldocker您的欢迎：）@Racheldocker您的欢迎：）

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

*{
    box-sizing: border-box;
}