绝对定位的子元素溢出父容器

Question

#outer和#inner必须都是position:absolute或fixed。

我怎样才能使100%中的#inner值相对于#outer的宽度减去其填充（例如，像一个帧）而没有{{1}溢出？

#inner

html, body {
  height: 100%;
  margin: 0;
  width: 100%;
}
#outer {
  background: red;
  height: 50%;
  padding: 20px;
  position: absolute;
  width: 50%;
}
#inner {
  background: yellow;
  height: 100%;
  position: absolute;
  width: 100%;
}

JSFiddle

Answer 1

html, body {
  height: 100%;
  margin: 0;
}
#outer {
  background: red;
  height: 50%;
  width: 50%;
  /* padding: 20px; */                  /* 1 */
  position: absolute;
}
#inner {
  background: yellow;
  position: absolute;
  height: calc(100% - 20px);           /* 2 */
  width: calc(100% - 20px);            /* 2 */
  top: 50%;                            /* 3 */
  left: 50%;                           /* 4 */
  transform: translate(-50%, -50%);    /* 5 */
}

<div id="outer">
  <div id="inner"></div>
</div>

注意：

1. 子元素上的填充将被子元素忽略，子元素绝对定位，因此从文档流程中删除。调整孩子的大小，以达到类似的效果。
2. 计算子项的宽度和高度以模拟父项的20px填充。
3. 垂直中心元素
4. 水平居中元素
5. Make vertical and horizontal centering precise.

Answer 2

代码稍微复杂一点，虽然它使用的是flex-box，但在旧版浏览器中并没有。

＆＃13;

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
#outer {
  background: red;
  height: 50%;
  width: 50%;
  position: absolute;
  display: flex;
}
#inner {
  box-sizing: border-box;
  background: yellow;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  margin: auto;
  flex: 0 1 1;
}

＆＃13;

<div id="outer">
  <div id="inner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;