Блог

Я использую 100% и —webkit-заполнение-доступно в течение длительного времени. Иногда —webkit-заполнение-доступно, давая мне другой результат, чем высота: 100%.

Кто — нибудь знает раз и навсегда, в чем разница между ними?

  {
   height: --webkit-fill-available
 }

 {
   height: 100%
 }
 

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

-webkit-fill-available это нестандартное имя , используемое браузерами WebKit stretch , экспериментальная функция, которую не следует использовать в производстве.

Я предполагаю fit-content , что у вас будет такое же поведение с тем преимуществом, что оно поддерживается всеми современными браузерами. По данным MDN:

Тот fit-content ведет себя так fit-content(stretch) . На практике это означает, что коробка будет использовать доступное пространство, но никогда не более max-content [внутренней максимальной ширины или высоты содержимого].

Наконец, height: 100% равно высоте блока, содержащего элемент.