Question

第二个div位置绝对。第一个div占用外部div宽度的60％，但是第二个div占用整个屏幕的60％宽度。我知道在第一个div上指定位置：relative可以解决问题。除了指定位置：relative之外，还有其他方法可以解决吗？

options

.outer {
  height: 100px;
  width: 100px;
}

.first {
  background: black;
  width: 60%;
  color: white;
}

.second {
  position: absolute;
  width: inherit;
  background: yellow;
  color: black;
}

Answer 1

如果外部div具有定义的宽度，则可以依靠CSS变量来定义百分比，并且继承将按预期进行：

.outer {
  height: 100px;
  --w:100px;
  width: var(--w);
}

.first {
  background: black;
  width: calc(0.6 * var(--w));
  color: white;
 
}

.second {
  position: absolute;
  width: inherit;
  background: yellow;
  color: black;
 
}

<div class="outer">
<div class="first">
  parent
  <div class="second">
    child
  </div>
</div>
</div>

Answer 2

如果您事先不知道父元素的宽度，则可以使用document.getElementById('parentID').getBoundingRect().width在javascript中计算其宽度，然后使用该值将子元素的大小调整为该值的60％。

但是您为什么不想在父级上使用position: relative？

有没有办法得到位置的继承宽度：绝对元素？

2 个答案: