父元素有padding的情况下，子元素宽度100%如何等于padding剩下的宽度？

Question

如题，补充一下，父元素相对定位，子元素绝对定位的情况下，
子元素宽度100%如何等于padding剩下的宽度？

<div class='container'>
  <div class='info'></div>
</div

body {
  background: red;
}
.container {
  position: relative;
  width: 400px;
  height: 400px;
  background: blue;
  padding: 20px;
}
.info {
  position: absolute;;;
  width: 100%;
  height: 100%;
  background: #fff;
}

想要的效果：

而实际效果却是这样：

Answer 1

原因在于父级元素加了padding之后，子元素的position: absolute定位会从父元素的padding值开始计算定位

可以给子元素加上left:0;top:0解决此问题

Answer 2

用宽度实现比较麻烦，因为父元素宽度是包含padding的，你都用了absolute了，直接

.info {
  position: absolute;;;
  left: 20px;
  right: 20px;
  top:20px;
  bottom: 20px;
}
// 或者
.info {
  width: calc(100% - 40px);
}

Answer 3

不知道还有没有其他要求，如果只是实现效果，你把定位去掉，直接

.info {
  height: 100%;
  background: #fff;
  // 文字居中
  display: flex;
  justify-content: center;
  align-items: center;
}

不就好了,没太懂为什么这里需要用到定位。