宽度：绝对定位元素的 100% 大于父元素

Question

我有一个宽度和高度未知的 div，这个 div 是一个更大的 div 的子节点之一。

#myDiv {
    /* Blah blah blah */
}

#inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

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

但问题是#innerdiv 不适合，#myDiv当它的宽度和高度设置为 时，它比它的父级大得多100%。

我究竟做错了什么？

Answer 1

接受的答案并没有为我解决它。父元素已经是position: relative;。

这对我有用：

在子元素中，而不是使用height:100%usetop:0; bottom:0;来填充高度，并left:0; right:0;填充宽度。

.child {
  top: 0; 
  bottom: 0;
  left: 0; 
  right: 0;
}

Answer 2

通过制作任何元素position: absolute;意味着：将我放在第一个position: relative;不总是等于其父元素的父元素。

如果还有其他孩子，您需要记住其中一个将位于绝对定位的元素“下方”。

Answer 3

绝对定位的子元素可以从相对定位的父元素伸出的原因之一是父元素是否有 padding。

以下面的例子为例：

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ff000099;
}

<div class="parent">
  <div class="child"></div>
</div>

如您所见，子项的实际宽度和高度与父项相同，但是由于父项具有 padding-top 和 padding-left，子项的内容放置在父项的 padding 之后。这使孩子在底部和右侧突出。

根据所需的结果，有不同的方法来处理这个问题。

如果你希望孩子完全地覆盖父，无论是使用投注的解决方案和设置top，right，bottom和left对孩子的替代属性width和height，或只保留width和height100％，并集top和left为0，这样的：

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ff000044;
}

<div class="parent">
  I am parent content
  <div class="child">I am child content</div>
</div>

如果您希望子级占据父级内边距内的所有空间，则可以使用calc()从子 div 中删除父级的内边距：

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  background-color: #ff000099;
}

<div class="parent">
  <div class="child"></div>
</div>

（请记住从孩子的宽度中删除左右填充以及从其高度中删除顶部和底部。这就是我将填充乘以 2 的原因。）

结合这些，如果您希望孩子在顶部和左侧填充之后开始，但不伸出右侧或底部，只需从孩子的高度和宽度中减去顶部和左侧填充：

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background-color: #ff000099;
}

<div class="parent">
  <div class="child"></div>
</div>