2

最初の行はコンテンツに合わせてスケーリングし、2 つ目は残りの高さで、コンテンツをその中に保持します。下部の高さは、オーバーフロー: スクロール、または高さの子: 100% などを持つことができるように、「実際の」(親などによってクリップされない) 必要があります。

これは次のようになります。

画像の説明、よ

相対テーブルセル内に絶対配置された div を使用して、 Chrome で動作させました。

http://jsfiddle.net/9FPqx/

その核心：

html:

<div class="row">
    <div class="cell">
        <div class="absolute-fill">
            Stuff
        </div>
    </div>
</div>

CSS:

.row
{
    display: table-row;
}

.cell
{
    display: table-cell;
    position: relative;
}

.absolute-fill
{
    position: absolute
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

テーブルセルとコンテンツの間に別の中間相対 div を使用すると (テーブルセル自体に相対を設定するのではなく)、Firefox で動作します。

http://jsfiddle.net/sXHry/

IEでは機能しません。IE >= 9 が必要です。

IE は、絶対的な子を持つ相対要素にはコンテンツの高さがないと考えているため、高さが 0 になっているようです。

私はとても近くにいるように感じますが、これまでのところ. これをhtmlとcssだけで解決する方法はありますか？display: table を使用して間違った方向に進んでいますか? それともあきらめて、javascriptを投げるべきですか？

4

1 に答える 1

2

なぜテーブルである必要があるのですか？コンテナにオーバーフローを隠せませんか？

html

<div class="container">
    <div class="top">
        Top, green area
    </div>
    <div class="bottom">
        Bottom, blue area
    </div>
</div>

CSS

.container {
    width: 250px;
    height: 162px;
    overflow: hidden;
    background: lightblue;
}
.top {
    background: lightgreen;
}

http://jsfiddle.net/sXHry/1/およびhttp://jsfiddle.net/sXHry/2/ (少ないコンテンツ)

啓発されることを楽しみにして、何かが欠けているのではないかと思います ;)

于 2013-07-03T08:29:41.360 に答える