У меня есть веб-сайт, который использует display: table-row для вертикального выравнивания двух делений.В верхней части находится div с фиксированной высотой, а в нижней - значение 100%, а для дочерней ячейки таблицы также устанавливается высота 100%.В предыдущих версиях Chrome и Firefox нижний элемент div заполнял оставшееся пространство.В Chrome 77 нижний div составляет 100% от высоты тела.Это все еще работает в FF.Очевидно, это не работает в IE10.
Может кто-нибудь сказать мне, почему это изменилось?Я не ищу, является ли CSS «неправильным» или «правильным» или как его «исправить» - просто чтобы понять, что происходит в обновлении Chrome, которое изменило это поведение.Спасибо
Вот код с удалением большого количества неважных вещей:
jsfiddle
HTML
<body>
<div id="container">
<div id="top-row">
<div id="top-inner"></div>
</div>
<div id="bottom-row">
<div id="bottom-inner">
<iframe src="https://www.google.com/webhp?igu=1" id="frame"></iframe>
</div>
</div>
</div>
</body>
CSS
html, body, #container, #frame {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#container {
display: table;
}
#top-row {
display: table-row;
height: 0;
}
#bottom-row {
height: 100%;
display: table-row;
}
#top-inner {
background-color: pink;
padding: 0;
display: table-cell;
height: 26px;
}
#bottom-inner {
display: table-cell;
height: 100%
}
#frame {
border: none;
overflow: hidden;
display: block;
}