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，并在通过后端添加新项目后调用以下函数：

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

此处，＆＃39;类别＆＃39;是您的列表的ID（我想您正在使用＆＃39;选择＆＃39;标记多个选项作为列表）。您可以根据需要使用_newHeight进行计算。

Answer 2

你可以通过jquery实现这个目标

<强> HTML

<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);

Fiddle Demo

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

2 个答案: