Javascript 协调CSS，有没有比使用JS更直接的方法？ 我发现我不得不经常使用JS，因为我认为这是在CSS中应该解决的问题。

以下是我正在尝试做的一个示例情况：

div.outer { height:{Y}px }
div.inner { padding-top:{Y}px }

我真的不想特别设置外部div的高度，但我想让内部div的

padding top

属性与外部div的高度相匹配。是否缺少CSS的某些方面？还是JS是常用的方法

在jQuery中，我会这样做：

var y = $('div.outer').height();
$('div.inner').css('padding-top',y+'px');

虽然很少见，但是禁用JS的客户端呢

---

澄清：请注意，这并不是一个“如何在CSS中做到这一点”的问题。我知道目前，你不能在CSS中这样做。更确切地说，这是一个关于什么样的解决方案可以实现我所追求的协调的问题。如果我只想计算初始交付的值，我可以用PHP和VAR编写CSS，但这不是我想要的。它更多的是协调两个元素，以便当一个元素发生变化时（由于窗口被调整大小或设备被旋转，或通过AJAX引入另一个元素等），另一个元素的样式也会随之变化。

似乎不支持CSS中的变量。尝试使用动态样式表

http://www.example.com/example.css

#outer { height:{Y}px; }

#inner { padding-top:{Y}px; }

http://www.example.html

<div id="outer">

<div id="inner">

http://www.example.com/example.css
#外部{高度：{Y}px；}
#内部{padding top:{Y}px；}
http://www.example.html

我认为不能根据父对象的高度设置填充。您可以使用SASS之类的预处理器，而SASS支持变量

不确定你想做什么，但我想这会产生类似的结果：

.inner {
    transform: translateY(100%);
}

---

使用适当的前缀，浏览器支持是不错的-

通过将ID或类分配给所讨论的HTML元素，应该可以相对容易地完成我假设您正在尝试的操作。即：

.outer {
    height: 100px;
}

.inner {
    padding-top: 100px;
}

我想你想要CSS做的是自动将.inner padding top设置为.outer的高度，而无需不断调整CSS。然而，正如jmr333所述，目前CSS中不支持变量

---

但是，在这种情况下，我不明白为什么您需要实现任何JavaScript，而您可以调整CSS以满足您的需要。

答案是不，这是不可能的（目前）。 纯属巧合，我偶然发现一个事实，显然，只能设置

padding top

属性相对于

父元素的宽度

！？在您的演示案例中，应该是：

div.outer { width: 400px; }
div.inner { padding-top: 50%; } /* will be exactly 200px */
/* You can also set a relative width (%), or inherit it */

我制作了一个小测试用例来演示这一点：。调整输出窗口的大小以查看值。当设置为50%时；

padding top

属性正好是父级宽度的50%，因为显然：

所有填充/边距属性上的百分比均指父级的宽度

---

仅供参考：

您目前不支持CSS中的变量。。如果你仍然想使用这种方法，你必须使用动态样式表语言，比如

less

或

sass

，它可以解析并编译成CSS。我不知道你想得到什么，你想获得什么样的视觉效果。你介意分享一下你想要实现的吗？可能还有另一种方法…我禁用js（或者更确切地说，使用noscript），看到没有js甚至无法呈现其初始内容的网站通常会让我立即离开

，我真的不想专门设置外部div的高度。我认为OP的意思是元素的高度可能是可变的，所以硬编码值是他试图避免的。这时您可以使用js动态设置该值。@filoxo显然是目前为止唯一一位理解该问题的海报。@Octopus，这是因为您的解释很差，并且您没有在要求时提供反馈。这是宽度的百分比，而不是高度的百分比。这有多奇怪？