如何将填充或边距或任何属性设置为元素尺寸的百分比而不是父容器尺寸答案

【问题标题】：How to set the padding or margin or any property as a percentage of elements dimension and not parent container dimension如何将填充或边距或任何属性设置为元素尺寸的百分比而不是父容器尺寸
【发布时间】：2021-01-12 08:26:53
【问题描述】：

我想设置元素的样式，但是当我使用padding: '50%' 时，我想将其设置为元素高度的 50%，而不是父元素宽度

【问题讨论】：

你应该看看这个页面 - w3schools.com/cssref/css_units.asp
这不起作用：（1）百分比基于元素的高度（2）添加填充后元素的高度会增加（3）我们有一个新的高度，所以我们需要重新计算填充（回到（1），你有一个无限循环）

标签： html css padding

【解决方案1】：

-创建一个变量并为其分配一个元素高度的值

-对于填充使用 calc() 函数根据该变量计算它

【讨论】：

【解决方案2】：

基于百分比的填充基于width of the parent container。这就是 CSS 规范的工作方式。我不知道任何基于高度的填充相关语法。但是，您可以使用 javascript 动态计算和设置所需的填充。像Element.clientHeight 这样的东西可能是一个开始的地方。

【讨论】：