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

Question

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

我怎样才能让 #inner 中的 100% 值相对于 #outer 的宽度减去它的填充 (例如，像一个框架)并且没有 #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%;
}

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

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. 父元素上的填充将被子元素忽略，子元素是绝对定位的，因此从文档流中移除。而是调整 child 的大小以达到类似的效果。
2. 计算子项的宽度和高度以模拟父项上的 20 像素内边距。
3. 元素垂直居中
4. 元素水平居中
5. Make vertical and horizontal centering precise.