2

純粋なCSSで、動的な「スポンジ状」の高さ要素を持つ方法を探しています

設定された高さのリストがあり、リスト要素の数に応じて、それらを組み合わせた高さは、ULの高さの合計100％を占めます。

たとえば、1つの要素は100％の高さ、2つの要素は両方とも50％、3つの要素は33％のピースなどです。

最小の高さを設定して、特定のサイズを下回らないようにしましたが、問題は、要素2-nが最初の要素によってULから完全に押し出されていることです（100全体を占有します） ％height）-私が望むようにスポンジ状になる代わりに。

たぶん、リスト要素をコンテナ内にとどまらせるいくつかの属性、またはリスト要素が最小の高さに達するまで縮小する魔法の属性が欠けていますか？

私を夢中にさせる。

これが試してみるフィドルです：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セレクターと兄弟数に基づくスタイリング要素を備えた賢いリストへのクレジット）

于 2013-03-06T03:52:11.113 に答える