如何获取具有继承宽度的元素的宽度？

Question

我有一个快速响应的网站。我还有一些嵌套元素，它们使用百分比（%）宽度。现在我想得到一个子元素的宽度，并将其设置为另一个元素的宽度。

注意：我可以获得我需要的元素的宽度，并使用JavaScript将其设置为另一个元素（类似于：$('.children')[0].getBBox().width;）。但我想知道，我是否有可能使用纯CSS？

这是我的HTML结构和CSS代码：

#grandfather {
  width: 70%;
  border: 1px solid #666;
  padding: 5px;
}
.father {
  width: 80%;
  border: 1px solid #999;
  padding: 5px;
}
.children {
  width 90%;
  border: 1px solid #ccc;
  padding: 5px;
}
.follow-width {
  position: absolute;
  border: 1px solid #ccc;
  padding: 5px;
  /* width: ? */
}

<div id="grandfather">
  <div class="father">
    <div class="children">how to get the width of this element?</div>
  </div>
</div>

<br>
<hr>
<br>
<div class="follow-width">
  this element needs to the width of div.children
</div>

Answer 1

不，你不能只在CSS中这样做。

但是你可以在版本8之前的Internet Explorer中使用它：

width: expression(document.getElementById("grandfather").style.width);

#grandfather {
  width: 70%;
  border: 1px solid #666;
  padding: 5px;
}
.father {
  width: 80%;
  border: 1px solid #999;
  padding: 5px;
}
.children {
  width 90%;
  border: 1px solid #ccc;
  padding: 5px;
}
.follow-width {
  position: absolute;
  border: 1px solid #ccc;
  padding: 5px;
  width: expression(document.getElementById("grandfather").style.width);
}

<div id="grandfather">
  <div class="father">
    <div class="children">how to get the width of this element?</div>
  </div>
</div>

<br>
<hr>
<br>
<div class="follow-width">
  this element needs to the width of div.children
</div>