如何在列表元素上有一个“海绵”高度答案

【问题标题】：How to have a "spongy" height on list elements如何在列表元素上有一个“海绵”高度
【发布时间】：2013-02-20 16:38:35
【问题描述】：

我正在寻找一种方法，在纯 CSS 中，拥有动态的“海绵”高度元素

你有一个设定高度的列表，根据列表元素的个数，它们的组合高度一共占据了UL高度的100%

例如1 个元素为 100% 高度，2 个元素均为 50%，3 个元素为 33%，等等...

我已经设置了一个最小高度，所以它不会低于一定的大小，但我遇到的问题是元素 2-n 被第一个元素完全推出了它们的 UL（它占用整个 100% 的高度）——而不是像我想要的那样松软。

也许我遗漏了一些强制列表元素留在其容器内的属性，或者是一些使列表元素缩小直到它们达到最小高度的魔法属性？

把我逼疯了。

这是一个尝试：http://jsfiddle.net/CrudOMatic/nYMp7/

CSS：

.container { height: 104px; }
.entry-value {
    width: 100%;
    height: 100%;
    min-height: 104px;
    max-height: 104px;
    margin: 0;
    padding: 0;
    background: #ffd300;
    list-style: none;
    display: block;
    overflow: hidden;
}
.entry-value li {
    width: 100%;
    height: 100%;
    min-height: 23px;
    max-height: 100%;
    border-bottom: solid #000000 1px;
    display: block;
    overflow: hidden;
}

HTML：

<div class="container">
    <ul class="entry-value">
        <li>Text 1</li>
        <li>Text 2</li>
    </ul>
</div>

【问题讨论】：

您是否关心支持旧浏览器？您可以使用 flexbox 轻松做到这一点
不是真的，但它会是理想的 - 哎呀，我已经排除了 IE8
嗯，我不得不对 flexbox 说不 - 支持很糟糕

标签： css dynamic height

【解决方案1】：

你可以使用这个技巧，它使用第一项和最后一项之间的关系..
（每个行数都需要一个规则）

/* 1 item */
.entry-value li:first-child:nth-last-child(1) {
    height: 100%;
}

/* 2 items */
.entry-value li:first-child:nth-last-child(2),
.entry-value li:first-child:nth-last-child(2) ~ li {
    height: 50%;
}

/* 3 items */
.entry-value li:first-child:nth-last-child(3),
.entry-value li:first-child:nth-last-child(3) ~ li {
    height: 33.3333%;
}

/* 4 items */
.entry-value li:first-child:nth-last-child(4),
.entry-value li:first-child:nth-last-child(4) ~ li {
    height: 25%;
}

http://jsfiddle.net/gaby/nYMp7/1/的演示

（感谢 Clever lists with CSS3 selectors 和 Styling elements based on sibling count）

【讨论】：