Отображение IE: дочерний элемент таблицы-таблицы игнорирует высоту: 100%

Мне нужно динамически строить таблицу для хранения некоторых данных.
Я придерживался обычного подхода к использованию div с display: table, display: table-row и display: table-cell:

.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>

Ответ 1

К сожалению, влияние процентных значений для height на элементы display: table-row и display: table-cell составляет undefined в соответствии с спецификацией:

CSS 2.1 не определяет, как вычисляется высота ячеек таблицы и строк таблицы, когда их высота задается с использованием процентных значений.

Таким образом, хотя браузер может заявить о полной поддержке макета таблицы, некоторые аспекты, такие как высоту процента, могут не выполняться последовательно во всех браузерах, потому что нет правильного поведения. Вы можете попытаться поднять вопрос в Microsoft Connect в надежде, что они изменят поведение, чтобы быть совместимым, но в то же время вам нужно будет найти другое обходное решение (и даже тогда вы не можете гарантировать, что поведение останется совместимым, даже в другие браузеры).

Что еще хуже, я только что протестировал, и это затрагивает все версии IE до 11, включая 11, что означает, что здесь будет не хватать IE-специфического взлома. Если вам нужно использовать макет таблицы CSS, о чем свидетельствует тот факт, что вам необходимо поддерживать IE8, тогда обходное решение с чистым CSS, вероятно, не выполнимо.

Ответ 2

Для Internet Explorer 8-10 table-cells с height: 100%; необходимо обернуть table-row с помощью height: 100%;.

Html для IE должен выглядеть следующим образом:

table > table-row > table-cell

В то время как другие браузеры будут корректно работать с

table > table-row
or
table > table-cell

[edit] Я снова просмотрел вопрос и заметил, что вы хотите установить 100% высоту не для ячеек таблицы, а для содержимого внутри нее.

решение 1. Таким образом, для высоты содержимого Internet Explorer связан с ближайшим элементом с высотой, установленной в абсолютных единицах, например пикселями, em, если вы хотите использовать% высоты, вам также может понадобиться чтобы установить высоту 100% для всех родительских элементов, это будет html и body. рабочий пример

решение 2: просто добавьте

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

Вам не нужно устанавливать высоту в любом из родительских элементов в этом случае. рабочий пример.

Надеюсь, что это поможет.