协调CSS，有没有比使用JS更直接的方法？

Question

我发现自己不得不经常使用 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 中执行此操作。相反，它更多的是关于其他类型的解决方案可以实现我所追求的协调的问题。如果我只想计算初始交付的值，我可以用 vars 在 PHP 中编写 CSS，但这不是我想要的。它更多是关于协调两个元素，以便当一个元素发生变化时（由于调整窗口大小或旋转设备，或通过 AJAX 引入另一个元素等），另一个元素的样式也会随之改变以匹配它。

Answer 1

答案是否定的，这是不可能的（目前）。 纯属巧合，我偶然发现了这样一个事实：显然，您只能将 padding-top 属性设置为相对于 parent element's width!?在您的演示案例中：

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

我制作了一个小测试用例来证明这一点：http://jsbin.com/rukabaso/1/edit。调整输出窗口的大小以查看值。设置为 50% 时； padding-top 属性正好是父级宽度的 50%，因为显然：

所有 padding/margin 属性的百分比是指父级的宽度

供参考：How is padding-top as a percentage related to the parent's width?

Answer 2

似乎不支持 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">

Answer 3

我认为您不能根据父项的高度设置填充。您可以使用支持变量的预处理器，如 SASS 和 LESS。

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

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

带有适当前缀的浏览器支持不错 - http://caniuse.com/transforms2d

Answer 4

通过将 ID 或类分配给相关的 HTML 元素，完成我假设您正在尝试做的事情应该相对容易。即：

.outer {
    height: 100px;
}

.inner {
    padding-top: 100px;
}

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

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