根据分辨率和项目数量调整div的高度

Question

我有一个要求，我在左侧面板中有3 panels（Chats, Groups, Channels），我需要adjust their heights基于resolutions和{{} 1}}在那个小组中。

我将items并获取该小组的api calls，并通过items bind获取这些小组。

请查看我已准备好的JSFiddle以获得清晰的理解。在此，我还撰写了一些额外的angular bindings并调整了media queries max-heights 。

现在，我的实际要求是：

1）如果所有3个面板中都有resolutions，则所有面板都应no items已经正常工作。

2）如果所有collapse都有3 panels，那么items more than its size作为已经有效的scroll should appear。

3）如果仅output screen，那么它应该自动one panel has items如图所示

同样适用于其他小组。

4）最后，如果只有expand its size和few items are available in the 2 panels，则应按以下方式显示。

实际上，我考虑过根据more items are present in the 3rd panel编写一些jquery after the api calls，但这有点难过，因为我需要检查分辨率以及所有面板中的项目数。

有没有实现这个目标的方法？
至少，是否有任何文章或其他内容我可以遵循并执行此操作？ 是jquery，这是唯一的方法吗？

Answer 1

您可以将其标准化为33.33333vh高度，然后在事后使用jQuery对其进行修改。它可能会变得有点复杂，具体取决于您想要满足的异常数量，但是这个单元会处理分辨率差异并得到现代浏览器的支持。

在你的jQuery中，你可以计算每个面板中的项目数量占总数的百分比，并给每个面板在vh中给出一个合适的高度 - 标签。

$(function() {
  var totalNumItems = $('.panel div').length;
  $('.panel').each(function() {
    setPanelHeight($(this));
  });

  function setPanelHeight(panel) {
    var numItems = panel.find('div').length,
    heightPercentage = (numItems / totalNumItems) * 100;
    /* calc -1.5em takes the label height into account */
    panel.css('height', 'calc(' + heightPercentage + 'vh - 1.5em)');
    panel.niceScroll();
  }
});

如果某个面板中没有任何项目，它会将其vh计算为0并因此将其折叠。

编辑：jsfiddle：https://jsfiddle.net/mattBBP/8vvcub3c/ 这不是很有效，因为它显示的区域不是视口的100％，但是这可以被修改/偏移/不会成为小提琴的问题。