Get what x% of an element is-CodePudding

I'm trying to set the margins of an HTML element to be x% of its size. Tried using margin-bottom: 50% or margin-bottom: 50vm but it gets x% of the screen size.

Code:

#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">

I want to set this to the task_box object.

CodePudding user response：

I think the only way to do this is using 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" >
<input type="text" >
<input type="text" >

CodePudding user response：

it helps to solve the problem

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

<input type="text" >
<input type="text" >
<input type="text" >