【问题标题】：Aurelia JS - Kendo UI vertical sliders with height in percent?Aurelia JS - Kendo UI 垂直滑块的高度百分比？
【发布时间】：2017-02-20 13:53:29
【问题描述】：
我采用了Aurelia JS - iterate through children (kendo UI) elements? 上发布的代码版本，并在此处稍作修改：
我基本上想表达的是垂直滑块应该是封闭div高度的90%；请注意：
- 如果没有 CSS
height: 规范，滑块会得到一些高度，就是这样
- 如果我在
px 或em 中设置CSS height（通过basic-use.css 中的div.eqSlider 或作为内联style 属性），那么一切都很好
- 但是，如果我将 CSS
height 设置为% 的百分比（通过basic-use.css 中的div.eqSlider，或作为内联style 属性），或者设置为calc(90%-10px) 或类似属性 - 然后显示完全搞砸了，如下图所示：
那么，是否有可能将这些滑块的高度设置为封闭div 高度的 90% - 如果可以，如何设置？
【问题讨论】：
标签：
javascript
css
kendo-ui
aurelia
【解决方案1】：
好的，我想我已经解决了——这个问题在这些情况下很典型：默认情况下，div 等没有定义高度，它们的高度是根据它们的内容计算的。由于示例中的滑块 是 内容，没有任何其他进一步的说明，因此它们的高度在 procent 中要么变为递归，要么是高度 0 的百分比。
这就是为什么必须确保从body 到封闭的div 的整个链具有以% 定义的高度（本质上是100%，除非它可能显示滚动条）。我以为我在前面的例子中已经这样做了——但是我在 .css 中犯了一个错误：我使用了 .example 选择器（用于类），而我应该使用 #example 选择器（用于 id）；这打破了嵌套 div 链的高度计算。
我注意到，一旦我为嵌套链中的每个 div 分配了边框；然后可以纠正，所以他们都有定义的高度。一旦所有的 div（以及封闭的 div）都有一个高度，那么滑块可以在 .css 文件中或通过 JavaScript 分配（通过slider.wrapper.css("height", "50%");）以百分比形式获得高度
所以，更正的代码现在开始了：
...并且输出看起来像预期的那样：