Question

所以我在固定高度的父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个标签，它们看起来很不错，最大高度约为50px，但当数字增加到10个标签时，我希望高度减少相同以适应父div。

我清楚地意识到，可以适应300px高度的标签数量有限制，因此父母必须滚动。

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

如果这有意义，请帮忙吗？

Answer 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"})
}

Answer 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')
}

Answer 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。

感谢大家的贡献。

使动态生成的列表项成为设置父高的％高度

3 个答案:

修改