2

我正在寻找一种方法，在纯 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>
4

1 回答 1

0

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

/* 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/

（归功于具有 CSS3 选择器和基于兄弟计数的样式元素的Clever 列表）

于 2013-03-06T03:52:11.113 回答