在高度上平均分配列表项（jQuery/CSS）

Question

我有一个带有 div 网格的响应式网站。

当我打开页面或调整浏览器的宽度时，这些 div 会自动调整大小以适应浏览器的宽度。 随着它们的宽度变化，它们的高度也在变化以保持它们的纵横比。

第一个 div 嵌入了一个由多个列表项组成的无序列表（以“inline-block”样式垂直显示）。

如前所述，根据浏览器的宽度（页面刷新或调整大小时），第一个 div 会自动调整其高度。 我想知道的是如何自动且均等地更改这些列表项的高度（或行高，或填充或边距），以使列表始终垂直填充整个 div。

了解列表项的数量会因页面而异，这一点很重要。它在页面打开时作为变量给出，但无论项目数量如何，脚本都应该能够工作。

这就是我对 jQuery 所做的（使用 php 变量）。

var dW=$(".mydiv").width();
var dH=$(".mydiv").height();
var liNum= <?php echo $how_many_li; ?>; 
var verticalSpace=  (dH / liNum) * 100;
verticalSpace= Math.round(verticalSpace) / 100;
$('.myListblock li a').css('line-height',verticalSpace+'px');
$('.myListblock').css('width',dW);
$('.myListblock').css('height',dH);

它有点工作，但它很混乱，因为有时看起来不错，但有时却不行。 70% 的情况下它没问题并且看起来不错，但有些时候列表超出了 div 的限制，有些时候列表只占据了 div 的 2/3。

所以，我想知道是否有更可预测/更有效/简单的方法来实现我想要的（纯 CSS 会是完美的，但我不知道是否可能）。

谢谢。

Answer 1

我认为您只能使用 CSS 来做到这一点。我不能 100% 确定是否兼容跨浏览器，但它可以在 Chrome 中运行（现在我尝试使用其他浏览器进行测试）。

HTML

<div class="main-wrapper">
    <ul class="myListblock">
        <li class="mydiv"><a href="#">div a</a></li>
        <li class="mydiv"><a href="#">div b</a></li>
        <li class="mydiv"><a href="#">div c</a></li>
        <li class="mydiv"><a href="#">div d</a></li>
        <li class="mydiv"><a href="#">div e</a></li>
    </ul>
</div>

CSS

.myListblock{
    display:table;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.myListblock li{
    display:table-row;
}

.myListblock li a{
    display:table-cell;
    vertical-align:middle;
}

但是，.myListblock 必须定义了height。

工作示例：http://jsfiddle.net/Frogmouth/czLgs9pu/