如何计算给定div相对于其父div的填充顶部百分比

问题：我想在所有列表项中以％添加padding-top（因为我需要将文本向下移一点，并且还需要所有元素都可伸缩），这是jsfiddle代码

高度正常。为了计算高度，我计算了li高度（最初为40px）相对于其父级ul（400px）的百分比。400像素中的40像素= 10％。在总ul高度仍等于400px之后，似乎工作正常。（盒子的高度为53.33vw，因为400px是750px的53.33％）。

但是问题在于以百分比计算填充顶部。为了计算padding-top（8px），我需要计算400px中的8px（400px是父ul的高度）= 2％，并且在固定布局中，我从高度中减去了2％（所以10％高度现在为8％）。但是之后，总ul高度等于470px。如何以百分比计算padding-top，以使ul的高度仍为400px？我需要保留那些400像素，这是ul的原始高度，在以％添加padding-top之后，ul的高度变为470像素，这是不正确的。

HTML：

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

CSS：

body {
    line-height: 1;
}

/* THIS IS MY CODE*/

.box {
    margin:0 auto;
    width:100%;
    max-width:750px;
    height:53.33vw;
    max-height:400px;
}

ul.list {
    padding: 0;
    width:100%;
    height:100%;
    background:green;
    list-style-type:none;
    text-align:center;
    font-size:3vw;
}

ul li:nth-child(odd) {
    height:8%;
    width:interit;
    padding-top:2%;
    background:grey;
}

ul li:nth-child(even) {
    height:8%;
    width:interit;
    padding-top:2%;
    background:red;
}

SidOfc.. 5

这是因为，padding和margin在%会从计算的width，而不是height你的愿望。

从填充规范

与边距属性不同，填充值的值不能为负。与边距属性一样，填充属性的百分比值是指生成的框的包含块的宽度。

从保证金的规格

相对于生成的框的包含块的宽度计算百分比。请注意，“ margin-top”和“ margin-bottom”也是如此。如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义。这也是如何创建HTML中的纵横比锁定div的，因为你可以计算出height从width使用padding-top一个百分比值。

一种解决方案是使用CSS calc，它具有良好的浏览器支持，并以非常简单的方式解决了您的问题。唯一的缺点是，它不会计算padding-topin，%但是您根本无法根据元素的padding-topin %进行计算，height除非您使用javascript。

如果你不绝对需要的padding-top: 2%;，我建议如下解决方案。

您的CSS看起来像这样

ul.list li {
    height: calc(10% - 8px);
    padding-top: 8px;
}

这将使所有ul.list li项目的高度为10% - 8px，8px然后将其用作值，padding-top从本质上讲，它将10%再次成为完美。

您也可以用其他样式编写选择器，在ul.list li这里我用作主要选择器来选择所有li元素，但您拥有:nth-child(odd)and :nth-child(even)选择器。

您在这些选择器上写了重复的属性，而唯一的区别是它们的background属性。

我强烈建议您尽可能避免重复，因为您肯定会忘记有时更改两个属性，而将CSS更改为如下所示：

/*shared properties in a general selector*/
ul.list li {
    width: inherit;
    height: calc(10% - 8px);
    padding-top: 8px;
    background: grey;
}

/*if rule is not applied, use ul.list instead of just ul*/
ul li:nth-child(even) {
    background: red;
}

这甚至消除了ul li:nth-child(odd)对此的需求，因为这也可以成为共享样式的一部分，然后由更特定的选择器覆盖ul li:nth-child(even)。

其它的办法

替代依赖%值的另一种方法是使用em或rem值-它们通过基于字体大小进行缩放来工作。

更多阅读

Web设计基础Rem-vs-em-vs-px尺寸调整元素在CSS中

ems具有比例媒体查询-ftw

埃姆斯雷姆斯

困惑的回忆

基本上，rem是始终相对于root element它是元件。

在元素上设置字体大小将定义1remCSS中的值，如果未font-size设置，则使用浏览器默认值（通常16px会使用）。

html {
    font-size: 16px; /*1rem is now 16px*/
}

当您font-size使用值16pxthen 定义上面的like时0.5rem将等于8px-为什么这很有趣？可伸缩！但是通过不同的方式。

现在，当您申请一个媒体查询和改变font-size的东西大或变小，使用一切rem都会按比例缩放（你必须设置font-size的的元素ofcourse）。

现在em有点不同，它是相对于它自己的，font-size但是由于此get是自动从其父元素继承而来的（如果font-size在em或%中设置），它基本上是相对于父元素的。

如果我们以最后一个CSS示例为例

html {
    font-size: 16px; /* 1rem = 16px, 1em = 16px */
}

body > div { /*every direct div of body tag*/
    font-size: 0.5em; /*8px*/
    font-size: 0.5rem; /*8px*/
}

body > div > div { /*every second level nested div*/
    font-size: 0.5em; /*4px*/
    font-size: 0.5rem; /*8px*/
}

基本上，由于em是相对于其父级大小排序的，因此在放大时字体大小会减小更多em-这是潜在的危险，因为如果更改结构并在大多数页面上添加一个会稍微减小字体大小的容器，这可能具有比您想象的更大的效果。

从技术上来讲em，这rem是根据属性缩放padding和margin处理元素的最佳方法font-size。

您的容器的示例如下所示：

ul.list li {
    height: 8%;
    padding-top: 0.5rem; /*if font-size is 16px, this will be 8px*/
}

在可伸缩性方面，例如，当您将字体大小更改为移动设备上的其他大小时，这将起作用。

它不能为您的问题提供解决方案，但可以为您提供有关扩展性的答案和最佳选择，希望此对您有所帮助：)

1> SidOfc..：

---

这是因为，padding和margin在%会从计算的width，而不是height你的愿望。

从填充规范

与边距属性不同，填充值的值不能为负。与边距属性一样，填充属性的百分比值是指生成的框的包含块的宽度。

从保证金的规格

相对于生成的框的包含块的宽度计算百分比。请注意，“ margin-top”和“ margin-bottom”也是如此。如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义。这也是如何创建HTML中的纵横比锁定div的，因为你可以计算出height从width使用padding-top一个百分比值。

一种解决方案是使用CSS calc，它具有良好的浏览器支持，并以非常简单的方式解决了您的问题。唯一的缺点是，它不会计算padding-topin，%但是您根本无法根据元素的padding-topin %进行计算，height除非您使用javascript。

如果你不绝对需要的padding-top: 2%;，我建议如下解决方案。

您的CSS看起来像这样

ul.list li {
    height: calc(10% - 8px);
    padding-top: 8px;
}

这将使所有ul.list li项目的高度为10% - 8px，8px然后将其用作值，padding-top从本质上讲，它将10%再次成为完美。

您也可以用其他样式编写选择器，在ul.list li这里我用作主要选择器来选择所有li元素，但您拥有:nth-child(odd)and :nth-child(even)选择器。

您在这些选择器上写了重复的属性，而唯一的区别是它们的background属性。

我强烈建议您尽可能避免重复，因为您肯定会忘记有时更改两个属性，而将CSS更改为如下所示：

/*shared properties in a general selector*/
ul.list li {
    width: inherit;
    height: calc(10% - 8px);
    padding-top: 8px;
    background: grey;
}

/*if rule is not applied, use ul.list instead of just ul*/
ul li:nth-child(even) {
    background: red;
}

这甚至消除了ul li:nth-child(odd)对此的需求，因为这也可以成为共享样式的一部分，然后由更特定的选择器覆盖ul li:nth-child(even)。

其它的办法

替代依赖%值的另一种方法是使用em或rem值-它们通过基于字体大小进行缩放来工作。

更多阅读

Web设计基础Rem-vs-em-vs-px尺寸调整元素在CSS中

ems具有比例媒体查询-ftw

埃姆斯雷姆斯

困惑的回忆

基本上，rem是始终相对于root element它是元件。

在元素上设置字体大小将定义1remCSS中的值，如果未font-size设置，则使用浏览器默认值（通常16px会使用）。

html {
    font-size: 16px; /*1rem is now 16px*/
}

当您font-size使用值16pxthen 定义上面的like时0.5rem将等于8px-为什么这很有趣？可伸缩！但是通过不同的方式。

现在，当您申请一个媒体查询和改变font-size的东西大或变小，使用一切rem都会按比例缩放（你必须设置font-size的的元素ofcourse）。

现在em有点不同，它是相对于它自己的，font-size但是由于此get是自动从其父元素继承而来的（如果font-size在em或%中设置），它基本上是相对于父元素的。

如果我们以最后一个CSS示例为例

html {
    font-size: 16px; /* 1rem = 16px, 1em = 16px */
}

body > div { /*every direct div of body tag*/
    font-size: 0.5em; /*8px*/
    font-size: 0.5rem; /*8px*/
}

body > div > div { /*every second level nested div*/
    font-size: 0.5em; /*4px*/
    font-size: 0.5rem; /*8px*/
}

基本上，由于em是相对于其父级大小排序的，因此在放大时字体大小会减小更多em-这是潜在的危险，因为如果更改结构并在大多数页面上添加一个会稍微减小字体大小的容器，这可能具有比您想象的更大的效果。

从技术上来讲em，这rem是根据属性缩放padding和margin处理元素的最佳方法font-size。

您的容器的示例如下所示：

ul.list li {
    height: 8%;
    padding-top: 0.5rem; /*if font-size is 16px, this will be 8px*/
}

在可伸缩性方面，例如，当您将字体大小更改为移动设备上的其他大小时，这将起作用。

它不能为您的问题提供解决方案，但可以为您提供有关扩展性的答案和最佳选择，希望此对您有所帮助：)