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

Question

我已经采取了版本发布在Aurelia JS - iterate through children (kendo UI) elements?代码和修改它咯，在这里：

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

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

• 如果没有CSS height:规格，滑块得到一些高度，那就是它
• 如果我设置的CSS height（通过在basic-use.cssdiv.eqSlider，或作为内嵌style属性）在任一px或em，那么所有的罚款
• 但是，如果我%（经由div.eqSlider在basic-use.css，或作为内嵌style属性）设定的CSS height百分比，或calc(90%-10px)或类似的 - 则显示完全弄乱，如下所示的图像上：

那么，它在某种程度上能够这些滑块的高度设置为所述高度的90％内附div - 如果是这样，怎么样？

Answer 1

好吧，我认为我解决了这个问题 - 在这些情况下是典型的：默认情况下，div等没有定义高度，并根据它们的内容计算高度。由于该示例中的滑块是的内容，而无需任何其它进一步的规范，其在procent高度然后要么变得递归的，或者是高度0

的百分比这就是为什么然后必须确保从整个链body到封闭的div有一个以％为单位定义的高度（本质上是100％，除了它可以显示滚动条）。我以为我在前面的例子中已经这样做了 - 但我在.css中犯了一个错误：我使用了.example选择器（对于一个类），而我应该使用#example选择器（对于id）;并打破了嵌套divs链的高度计算。

我注意到，一旦我给嵌套链中的每个div分配了边界，然后可以纠正，所以他们都有定义的高度。一旦所有的div - 因此包括一个 - 有一个高度，那么滑块可以得到一个百分比的高度，无论是在.css文件，或通过JavaScript的指派（通过slider.wrapper.css("height", "50%");）

所以，现予以更正代码是：

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

...和输出如下预期：