html - 使子div成为父div的一半大小

Question

我有一个父 div 和一个子 div。我希望子具有父 div 的一半宽度和一半高度。我不能使用任何特定值(例如:500px)或任何视点单位(vh & vw)/percentage dimensions. 那么有什么方法可以继承父div一半的尺寸吗？

Answer 1

如果您使用 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>