Дробная высота у table. Почему браузер так считает высоту? Откуда берется белая полоса внизу?

Question

[Павел Кизернис]

Высота должна быть динамической...
Смотреть: https://codepen.io/lubus/pen/WJvQpR

Скрин:


Высота трех блоков задана в процентах (20%, 70%, 10%).
Родитель имеет высоту 4,5in (если умножить на 96 - это 432px).
Минус 6px border - имеем 426px
20% от 426px - это 85,2px (хотя по факту там 84,8px)
70% от 426px - это 298,2px (хотя по факту там 297,6px)
10% от 426px - это 42,6x (хотя по факту там 42,4px)

Т.е. в сумме рендерится меньше на 1,2px. Почему?

Answer 1

[Вадим Белкин]

пустое пространство после черного блока, т.е. данный блок не заполняет все оставшееся место.
Задайте высоту для .big-frame .layout-1 .frame-content .frame-contact чуть больше и увидите

Comments

[Павел Кизернис]

Вот собственно и вопрос - почему не заполняет полностью?
Дам динамическая высота должна быть...
у .frame-contact высота 10%
у .frame-text - 70%
у .frame-title - 20%

[Вадим Белкин]

Интересное поведение таблиц, на практике не сталкивался. Интересно было бы узнать самому.
Например если внутри .frame-contact убрать span - высота нормализуется. Если все display: table заменить на block - так же все нормально растягивается. Такое ощущение что табличные ячейки или таблицы не хотят работать с дробными значениями высоты, т.к. при переводе в реальные пиксели проценты высоты дают дробные значения (в инспекторе можно увидеть это). В блочном виде в хроме нормально отрабатывают дробные размеры высоты, но в табличном почему-то округлят до целых. В FF такой проблемы нет, там получаются так же дробные значения и все нормально заполняется.

Я бы посоветовал использовать флексы для такого же лейаута раз с таблицами такая проблема, но это естественно если поддержка браузеров позволяет.