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的客户呢？

澄清：请注意，这不是一个＆＃34;我如何在CSS中做到这一点＆＃34;题。我知道目前，你不能在CSS中这样做。相反，更多的是关于其他类型的解决方案可以实现我所遵循的协调的问题。如果我只想计算初始交付的价值，我可以用PHP编写PHP的PHP，但这不是我之后的。它更多的是协调两个元素，以便当一个元素发生变化时（由于窗口被调整大小或设备被旋转，或者另一个元素通过AJAX引入等），另一个元素的样式也会改变以匹配它。 / p>

Answer 1

答案是不可能的（此时此刻）。纯粹是巧合，我偶然发现，显然，你只能设置相对于padding-top的{{1}}属性！在你的演示案例中，它是：

parent element's width

我做了一个小例子来证明这一点：http://jsbin.com/rukabaso/1/edit。调整输出窗口的大小以查看值。设定为50％时; div.outer { width: 400px; } div.inner { padding-top: 50%; } /* will be exactly 200px */ /* You can also set a relative width (%), or inherit it */属性恰好是父级宽度的50％，因为显然：

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

供参考：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

通过为相关的HTML元素分配ID或类，应该相对容易地完成我认为您尝试做的事情。这是：

.outer {
    height: 100px;
}

.inner {
    padding-top: 100px;
}

我认为你想要CSS做的是自动将.inner padding-top设置为.outer的高度，而不必经常调整CSS。但是，正如jmr333所述，CSS目前不支持变量。

在这种情况下，我不知道为什么在根据需要调整CSS时根本需要实现任何JavaScript。

协调CSS，有没有比使用JS更简单的方法？

4 个答案: