html - 父级父级的百分比宽度

Question

我想弄清楚是否有某种方法可以使百分比引用父级的父级。

在下面的示例中，我希望文本具有绿色 div 的宽度，而不是其直接父级(白色)的宽度。

#fluid {
  width: 75vw;
  height: 75vh;
  background: olive;
  position: absolute;
}

#fixed {
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#text {
  color: black;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

<div id="fluid">
  <article id="fixed">
    <h3 id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
  </article>
</div>

有什么方法可以仅使用 CSS 来实现吗？

Answer 1

不幸的是，不可能使元素的宽度直接与其祖父元素相关。但是，您可以使父元素成为祖父元素的 100%，并使目标元素成为其父元素的百分比宽度:

#fluid {
  width: 75vw;
}

#fixed {
  width: 100%;
}

#text {
  width: 50% /* 37.5vw */
}

不幸的是，拥有固定宽度的“中间”div 和与其祖 parent 相关的 child 是不可能的，因为 child 只能与其直接 parent 相关。

您想要实现的目标(在典型情况下)的一个解决方案是将 #text 移出 #fixed，并让它们都绝对定位, #fluid 相对定位。它们将占据相同的区域，产生相同的预期效果:)

<div id="fluid">
  <article id="fixed"></article>
  <h3 id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>

#fluid {
  position: relative;
  width: 75vw;
}

#fixed {
  position: absolute;
  width: 100px;
}

#text {
  position: absolute;
  width: 50% /* 37.5vw */
}

虽然听起来好像您最终会有多个 .article 而只有一个 #fluid，因此 HTML 结构可能不适合。

希望对您有所帮助! :)