通过向列表中添加新的列表项来计算列表高度

Question

假设：我有一个列表调用类别（高度为300px）。上面已经有 5 个项目。

所以我需要的是，如果我通过后端添加另一个类别项目，该新项目应该自动设置为新高度。（请参阅示例以清除更多内容）

示例：我有 5 个类别项目。列表高度为 300px。因此，在这种情况下，每个列表项都将高度设置为 （300/5） 60px。如果我添加新的类别项目，那么高度应设置为 （300/6） 50px。

列表

<div class="categories">
  <ul>
    <h3>Categories</h3>
      <?php
      foreach ($cat as $new_cat){
       ?>
          <li class="cat_list"><a href="#"><?php echo $new_cat['cat_item'];?></a></li>
      <?php
      }
      ?>
  </ul>
</div>

CSS

  .categories{
    border:1px solid #EEE;
    height: 434px;
    max-height: 434px;
}
.categories h3{
    font-size:1.2em;
    color:#FFF;
    padding:10px;
    background:#B81D22;
    text-transform:uppercase;
    font-family: 'ambleregular';    
}
.categories li a{
    display:block;
    font-size:0.8em;
    padding:8px 15px;
    color: #9C9C9C;
    font-family: 'ambleregular';
    margin:0 20px;
    background:url(../images/drop_arrow.png) no-repeat 0;
    border-bottom: 1px solid #EEE;
    text-transform:uppercase;   
}
.categories li:last-child a{
    border:none;
}
.categories li a:hover{
    color:#B81D22;
}

我该如何管理它？？

Answer 1

你可以

通过jquery来实现这一点

目录

<ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS

.list {
    height:500px;
    border:1px solid red;
}

脚本

var listCount = $(".list").find("li").length;
var listHeight = $(".list").height();
$(".list li").height(listHeight / listCount);

小提琴演示

Answer 2

使用 jquery，并在通过后端添加新项目后调用以下函数：

function changeHeight(){
   var _count = $('#category option').size();
   var _newHeight = 20*_count;
   $('#category').css('height',_newHeight+'px');
}

在这里，"类别"是列表的 id（我想您正在使用带有多个选项的"选择"标签作为列表）。您可以根据需要使用_newHeight进行计算。