获取元素的x%是多少

Question

我正试图将HTML元素的边距设置为其大小的x%。尝试使用margin-bottom: 50%或margin-bottom: 50vm，但得到屏幕大小的x%。

代码：

#task_box {
margin-bottom: 1%;
display: block;
}

<input type="text" id="task_box">
<input type="text" id="task_box">
<input type="text" id="task_box">

我想将其设置为task_box对象。

Answer 1

我认为唯一的方法是使用JS。

const taskBoxes = document.querySelectorAll(".task_box");

taskBoxes.forEach(taskBox => {
var height = taskBox.offsetHeight;
var marginBottom = height / 2;
taskBox.style.marginBottom = marginBottom + 'px';
});

.task_box {
display: block;
}

<input type="text" class="task_box">
<input type="text" class="task_box">
<input type="text" class="task_box">

Answer 2

它有助于解决问题

.task_box {
margin-bottom: calc(100% - 50%);
display: block;
}

<input type="text" class="task_box">
<input type="text" class="task_box">
<input type="text" class="task_box">