Высота Div в% не работает, однако в px или vh работает

Question

У меня есть диалоговое окно, и в теле диалогового окна я пытаюсь отобразить таблицу. Я применяю класс css к таблице упаковки div. Когда высота указана в px или vh, она работает правильно. Однако когда высота, указанная в%, скажем, 50%, она не ограничивает высоту таблицы div и отображает 100%.

Я знаю, что% рассчитывается на основе родительского элемента, но не мог понять, почему он не получает высоту родительского элемента, так как у меня также есть класс css, примененный к диалоговому окну. Диалоговое окно будет 95% от размера экрана.

.dialogbox{
   width: 95%;
   height: 95%;
}

.table-height {
    height: 50%;
}

Если высота указана в%, содержимое отображается в полном размере, а не в 50%.

Answer 1

Как указал yo.chen, вы должны добавить body, html { height: 100% }. Причина в том, что ваш родительский элемент также использует процент, поэтому его родитель также должен иметь определенную высоту. Если вы установите высоту на html, body (добавив обе учетные записи для различий браузера), он будет использовать высоту окна, и у вас будет начальная базовая высота для остальной части документа.

Answer 2

, если ваше диалоговое окно находится под телом ваша потребность

body, html { height: 100% }

Answer 3

Измените ваш родительский элемент на vh, он должен работать.Теперь родительский элемент имеет правильную высоту, тогда таблица внутри может рассчитать его высоту на основе родительского элемента.

.dialogbox{
   width: 95%;
   height: 95vh;
}
.table-height {
    height: 50%;
}