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

...和輸出如下預期：