CSS позиция снизу не идет вниз (только в Chrome)

Question

у меня есть:

<div style="position: absolute; width: 100%; height: 20%;">
    <table style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; table-layout: fixed;">
    ...
    </table>
</div>

В Firefox таблица тянется до нижней части div. В Chrome он растягивается только до высоты содержимого максимальной высоты в таблице. Кто-нибудь знает почему?

Answer 1

Хорошо, я думаю, что я наконец-то понял это.

Кажется, что когда таблице задана явная высота, она расширяется, чтобы соответствовать этой высоте так, как вы видите при установкеtop: 0; bottom: 0; в пределах абсолютно позиционированного <div>.

Также кажется, что когда вы используете "приемы" абсолютного позиционирования для установки высоты стола, Firefox и Opera интерпретируют это так, как если бы вы установили явноеВысота, хотя у вас нет.IE, Chrome и Safari не дают одинаковую интерпретацию.

Исправление для этого заключается в том, чтобы явно установить высоту таблицы.В этом случае вы захотите, чтобы это была вся высота <div>:

table {
  height: 100%;
}

В качестве отступления, поскольку вы явно устанавливаете высоту таблицы, вы больше не будетенужно растянуть его с помощью абсолютного позиционирования, чтобы вы могли избавиться от него вместе со свойствами top, bottom, left, and right.