让孩子成为父母的一半

Question

我有父母div＆amp;一个小孩在它上面。我希望孩子有一半的宽度和一个父div的半高。我不能使用任何特定值（例如：500px）或任何视点单位（vh＆amp; vw）/百分比尺寸。那么是否有任何方法可以继承父div的一半尺寸？

Answer 1

答案是使用父母尺寸的百分比作为儿童宽度＆amp;如果你使用CSS

的高度

.parent {
  height: 100px;
  width: 100px;
  background: red;
}

.child {
  height: 50%;
  width: 50%;
  background: blue;
}

<div class="parent">

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

</div>

Javascript解决方案

您可以将父高度和宽度分成两半并将其设置为子尺寸。

var parent = document.getElementsByClassName("parent")[0];

var child = document.getElementsByClassName("child")[0];

child.style.width = parent.offsetWidth / 2 + "px";

child.style.height = parent.offsetHeight / 2 + "px";

.parent {
  height: 100px;
  width: 100px;
  background: red;
}

.child {
  background: blue;
}

<div class="parent">

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

</div>

Answer 2

使用宽度：50％和高度：50％。它将使用50％的相应父属性。