Aurelia JS - Kendo UI垂直滑块，高度为百分比？

Question

我已经在Aurelia JS - iterate through children (kendo UI) elements?上发布了一个代码版本，稍加修改，在这里：

• https://gist.run/?id=323de53223d2ec872f17361378639556

我基本上想表示垂直滑块应该是封闭div高度的90％;请注意：

• 如果没有CSS height:规范，滑块会有一些高度，就是这样
• 如果我在height或{{1}中设置了CSS div.eqSlider（通过basic-use.css中的style，或作为内联px属性）那么一切都很好
• 但是，如果我将em设置为百分比height（通过%中的div.eqSlider或内联basic-use.css属性），或者到style或类似 - 然后显示完全混乱，如下图所示：

那么，是否有可能将这些滑块的高度设置为封闭calc(90%-10px)高度的90％ - 如果是这样，如何？

Answer 1

好吧，我认为我已经修好了 - 问题就像在这些情况下一样典型：默认情况下，div和其他人没有定义高度，他们的身高根据他们的内容来计算。由于示例中的滑块是内容，而没有任何其他进一步的说明，因此它们的高度会变为递归，或者是高度为0的百分比。

这就是为什么必须确保从div到封闭.example的整个链都具有以％定义的高度（实质上，100％，除了它可能显示滚动条）。我以为我在前面的例子中已经这样做了 - 但我在.css中犯了一个错误：我使用了#example选择器（对于一个类），而我应该使用slider.wrapper.css("height", "50%");选择器（用于一个id）;这打破了嵌套div链的高度计算。

我注意到，一旦我为嵌套链中的每个div指定了边框;然后可以纠正所以他们都有定义的高度。一旦所有div - 以及封闭的div - 都有一个高度，那么滑块可以在.css文件中获得高度百分比，或者通过JavaScript分配（通过{{1}}）

因此，更正后的代码现已开启：

• here

...输出看起来像预期的那样：

https://gist.run/?id=fcfc066733ad903fa0575388a1637e4f