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

如题,补充一下,父元素相对定位,子元素绝对定位的情况下,
子元素宽度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;
}

想要的效果:
image.png
而实际效果却是这样:
image.png

阅读 3.6k
3 个回答

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

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用
推荐问题
宣传栏