web-dev-qa-db-ja.com

IE表示：テーブルセルの子は高さを無視します：100％

データを保持するためにテーブルを動的に構築する必要があります。
_display: table、display: table-row、およびdisplay: table-cellでdivを使用する通常のアプローチに従いました。

.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}
<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
            </div>
        </div>
    </div>
</div>

またはJsfiddleで表示します。

ほとんどのブラウザでは、期待どおりの出力が得られます。

Sample image

ただし、IE8（およびおそらくそれ以降のバージョンでは、それ以降のバージョンをテストしていません）では、次のものが得られます。

Sample image 2

"Content"を囲むdivに設定されたheight: 100%は無視されます。

CanIUse によると、IE8は関連する表示プロパティを完全にサポートする必要があります。

私はSOで有効な解決策を見つけることなく、多くの同様の質問に目を通しました。 ）またはIE8では動作しません。

cssinternet-explorercss-tables
19
Nit

残念ながら、heightのパーセント値のdisplay: table-rowおよびdisplay: table-cell要素は spec に従って未定義です。

CSS 2.1では、パーセント値を使用して高さが指定されている場合、テーブルセルおよびテーブル行の高さを計算する方法は定義されていません。

したがって、ブラウザはテーブルレイアウトの完全なサポートを提供すると主張する場合がありますが、高さのパーセンテージなどの特定の側面は、正しい動作がないため、すべてのブラウザにわたって一貫して実装されない場合があります。 / Microsoft Connectで問題を提起して、動作を相互運用可能に変更することを期待できますが、その間に別の回避策を見つける必要があります（その場合でも動作が維持されることは保証できません他のブラウザでも相互運用可能です）。

さらに悪いことに、私はテストを行ったところ、これはIEまでの11を含むすべてのバージョンに影響します。つまり、IE固有のハックはここでは足りません。needto IE8をサポートする必要があるという事実から明らかなように、CSSテーブルレイアウトを使用すると、純粋なCSS回避策はおそらく実行不可能です。

20
BoltClock

Internet Explorer 8-10の場合、table-cellsはheight: 100%;でtable-rowはheight: 100%;でラップする必要があります。

IEのHTMLは次のようになります。

table > table-row > table-cell

他のブラウザは

table > table-row
or
table > table-cell

[編集]もう一度質問を確認しましたが、テーブルセルではなく、その内部のコンテンツに100％の高さを設定したいことに気付きました。

ソリューション1：Internet Explorerの場合、content-heightは、ピクセル、emなどの絶対単位で設定された高さを持つ最も近い要素に関連付けられます。 ％heightを使用します。また、すべての親要素に100％の高さを設定する必要があります。これはhtmlおよびbodyになります。 実施例

ソリューション2：単純に追加

.content {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.elem {
    overflow: hidden;
}

この場合、親要素のいずれにも高さを設定する必要はありません。 実施例 。

お役に立てれば。

6
Dariusz Sikorski