绝对定位元素的宽度：相对于其父元素而言，宽度为100%时会超出父元素的大小。

Question

我有一个宽高未知的div，这个div是更大的div的子元素之一。

#myDiv {
    /* Blah blah blah */
}

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

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

问题在于#inner div不适合，它比其父元素#myDiv大得多，而其宽度和高度设置为100％。

我做错了什么？

- aradalvand

---

相对于"myDiv"的位置将解决问题。 - Temani Afif

不会，因为在“#myDiv”中有许多元素，这种情况下子元素的排列会出现问题。 - aradalvand

你现在遇到的不是问题，而是正常的逻辑 :) 你的元素是绝对定位，由于父元素没有定位，所以它与父元素无关，而是与另一个祖先元素相关，因此使用100％时并非相对于其父元素。 - Temani Afif

Answer 1

将任何元素设置为position: absolute;的意思是：把我放在第一个具有position: relative;属性的父元素上，这并不总等于其父元素。

如果有其他子元素，您需要记住其中一个会被定位绝对的元素“覆盖”。

- pkolawa

---

请将我放置在第一个定位为相对定位(relative)、绝对定位(absolute)或固定定位(fixed)的祖先元素上，而不是精确到直接父元素(position: relative;)。 - Temani Afif

Answer 2

被接受的答案对我没用。 父元素已经是position:relative;。

下面是对我有效的方法:

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

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

- bets

---

被接受的答案应该是客观正确的，只是它没有提到你需要顶部、底部、左侧和右侧属性（我想）。我给两个答案点赞，因为它们似乎互相不完整。 - Shmack

Answer 3

绝对定位的子元素之所以会突出其相对定位的父元素，原因之一是父元素具有填充。

接下来看一个例子：

.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，因此子元素的内容会放置在父元素的内边距之后。这使得子元素在底部和右侧突出。

根据所需的结果，有不同的处理方法。

如果您想让子元素完全覆盖父元素，可以使用bets的解决方案，并在子元素上设置top、right、bottom和left属性，而不是width和height，或者只需保持width和height为100%，并将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>

（只需记住从子元素的宽度中去掉左右 padding, 从高度中去掉上下padding。这就是我将padding乘以2的原因。） 综合起来，如果您希望子元素从顶部和左侧padding后开始，但是不要超出右侧或底部，只需从子元素的高度和宽度中减去上下和左右padding的大小即可：

.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>

- Mike