Высота div: 100%; не работает с дисплеем: table-cell;

Мой код работал, когда

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>

Но не работает, когда я добавил отображение: table-cell; для div для использования вертикального выравнивания

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>

Я хочу, чтобы div закрывал все пробел в теле

Ответ 1

Теперь ваш код должен работать.

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

Пример

Правило большого пальца. Всегда выполняйте правильную разметку при display : table-cell.

Ответ 2

Вы должны установить высоту на 100% для всех родительских элементов, затем...

html, body {
    height: 100%
}

Попробуй, это сработало для меня. И лучше удалите все свойства CSS, которые вы задали перед body-элементом.

Ответ 3

Имея div.table > div.table-row > table.table-cell с высотой своего контейнера, это немного сложная вещь. Один из самых простых способов заключается в том, что вы можете добавить

.table {
    position: absolute;
}

в этом случае, если вы добавите

.table {
    height: 100%;
}

Это будет соответствовать его родительской высоте.