使动态生成的列表项成为设置父高度的 % 高度答案

【问题标题】：Make dynamically generated list items a % height of the set parent height使动态生成的列表项成为设置父高度的 % 高度
【发布时间】：2014-04-18 00:06:41
【问题描述】：

所以我在固定高度的父 div 中设置了以下垂直选项卡：

<div class="tabs-left">

  <ul class="nav-tabs">
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
    <li><a href="#" data-toggle="tab">Delete this tab</a></li>
  </ul>

  <a href="#">Add a tab</a>
</div>

每个<li> 项目都是动态的（可以添加或删除它们）。父 div tabs-left 的设置高度为 300px。

我如何（使用 css 或 jquery）将每个选项卡的高度设置为在一定数量的选项卡之上的父 div 的相等共享百分比？

例如，如图所示，有 4 个选项卡，它们看起来不错，最大高度约为 50 像素，但当数字增加到 10 个选项卡时，我希望高度同样减小以适应父 div。

考虑到易读性，我意识到可以容纳 300 像素高度的选项卡数量是有限制的，因此父级必须滚动。

我已经在li 项目上尝试了display: table-cell, display:block, height: auto 等，但没有任何乐趣。

如果有道理，请帮忙？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你也可以这样做：

http://codepen.io/EightArmsHQ/pen/ixmBq/

它将计算列表元素，计算出有多少空间，然后正确设置它们的所有高度。如果您添加或删除了更多列表元素，您只需在发生后调用该函数：

function work_out_height(){
  var li_count = $(".nav-tabs li").length;
  var li_height = parseInt($(".nav-tabs").height());
  var individual_height = li_height / li_count;
  console.log("count " + li_count)
  console.log("height " + li_height)
  console.log(individual_height)
  $(".nav-tabs li").each(function(){
    $(this).outerHeight(individual_height + "px");
  });
}

work_out_height();

$("#add").click(function(){
  var new_li = $(".nav-tabs li:first").clone();
  $(".nav-tabs").append(new_li);
  work_out_height()
})

编辑

您可以添加一个额外的位来检查，如果 li 太短，只需将其固定在任何高度即可。

http://codepen.io/EightArmsHQ/pen/cKhny/

if(individual_height < smallest_height){
  individual_height = smallest_height;
  $(".nav-tabs").css({"overflow-y":"scroll"})
}else{
  $(".nav-tabs").css({"overflow-y":"hidden"})
}

【讨论】：

这几乎可以完美运行。有没有办法，当每个选项卡的高度达到父项的高度时，它不再降低每个项目的高度？（因此父母只是滚动）？

【解决方案2】：

据我所知，css 无法做到这一点，因为 css 必须知道 li 元素的数量并据此计算高度，但它不能。

所以这里有一个 jQuery 解决方案。

var tabs = $('.nav-tabs li');

if(tabs.length < 10){
    tabs.css('min-height', '50px')
}
else{
    var height = [desired height calculation];
    tabs.css('min-height', height + 'px')
}

【讨论】：

【解决方案3】：

为了参考起见，我已经设法使用计算高度并在滚动前将 BOTH 最小高度和最大高度应用于列表项的函数来解决它当显示的项目太多时：

JS：

resizeTabs(30, 55);
function resizeTabs(minHeight, maxHeight) {
    var tabs = $('.nav-tabs li a');
    var containerHeight = $('.nav-tabs').height();
    var tabHeight = containerHeight/tabs.length;
    tabHeight = Math.min(maxHeight, Math.max(minHeight, tabHeight));
    tabs.outerHeight(tabHeight + 'px');
}

HTML：

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
        <li><a href="#" data-toggle="tab">TAB</a></li>
    </ul>
</div>

我的 'tabbable' div 现在设置为 px 高度，并且 listitem 选项卡会根据该高度自行计算。我也给每个标签一个margin-bottom:1px。

感谢大家的贡献。

【讨论】：