能否依据同一元素的height属性计算设置其padding-bottom属性值？

一、实现目标padding-bottom效果 #

CSS原生无法直接引用元素自身的计算后height值进行属性运算，但可以通过布局技巧间接实现你要的效果（假设「100%」指父容器的高度）：

Flex布局方案 #

通过Flex的空间分配特性，让元素自动填充父容器剩余空间，模拟padding-bottom的效果：

1. 给父容器设置Flex布局：

.parent {
  display: flex;
  flex-direction: column;
  height: 100%; /* 根据需求设置，比如100vh或父容器固定高度 */
}

2. 修改#elemID的样式，用伪元素填充剩余空间：

#elemID {
  margin: 10px;
  border: 2px solid #111;
  flex: 1; /* 占据父容器剩余空间 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#elemID .content {
  /* 内容高度由自身内容自动决定 */
}

#elemID::after {
  content: "";
  flex: 1; /* 自动填充内容之外的剩余空间，等效于你要的 padding-bottom: 100% - 内容高度 */
}

这种方式既保留了元素原有的margin和border，又实现了内容高度自动、剩余空间作为「padding-bottom」的效果。

二、纯CSS访问元素自身属性的限制 #

纯CSS原生语法没有通用机制可以直接引用元素自身的布局属性值（如height、width、margin等），仅有的有限方案：

• 特殊属性引用：比如currentColor可复用元素自身的color值，inherit可继承父元素属性值，但仅适用于非布局类属性。
• 场景化布局技巧：像上述Flex/Grid方案，通过布局规则间接实现「基于自身内容调整属性」的需求，但无法通用到所有属性。
• CSS变量：虽然你明确不想使用，但它是唯一能在元素样式中复用自定义属性值的方式，不过无法自动获取元素的计算后属性值。

总结：不借助JavaScript或CSS变量的情况下，纯CSS只能通过布局技巧实现特定场景的需求，无法通用访问自身布局属性。

内容的提问来源于stack exchange，提问作者Arya