Высоты, отображаемые по-разному в Chrome и Firefox

Я обнаружил, что если мы устанавливаем элемент уровня блока с height:auto или height: 0~100% без установки родительской высоты с явно выраженным значением, а дочерний элемент уровня блока имеет нижнее поле, тогда он будет вычислять высоту по-разному в Chrome, но не в Fire Fox. Для случая, который устанавливает height: 1%:

http://codepen.io/anon/pen/BjgKMR

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: 1%;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}
<div>
  <p class="inner">block level element</p>
</div>

Ответы

Ответ 1

Итак, сначала у вас есть стандарты W3C, которые представляют собой набор рекомендаций для разработчиков браузеров.

И тогда у вас есть производители браузеров, которые могут делать все, что захотят (о чем свидетельствует история отклонений Internet Explorer).

В частности, с высотой процента CSS, в браузерах есть явные различия в поведении.

Вы отправили один пример. Здесь другое:

Процент высоты в Flexbox: Chrome/Safari против Firefox/IE

При работе с flexbox, Chrome и Safari разрешают проценты высот на элементах flex на основе значения родительского свойства height. Firefox и IE11/Edge определяют приоритетность родительской высоты.

Похоже, браузеры Webkit придерживаются более традиционной интерпретации спецификации:

CSS height свойство

процент
Определяет процентную высоту. Процент вычисляется относительно высоты генерируемого блока, содержащего блок. Если высота содержащего блока явно не указана, и этот элемент не является абсолютно позиционированным, значение вычисляется как "авто".

auto
Высота зависит от значений других свойств.

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

Это традиционная интерпретация спецификации: Термин "высота" означает значение свойства height. Мое собственное мнение состоит в том, что этот язык является неопределенным и открытым для интерпретации, но требование свойства height стало преобладающей реализацией. Я никогда не видел min-height или max-height работы с родителем при работе с процентными значениями.

Тем не менее, в последнее время Firefox и IE расширили свою интерпретацию, чтобы принять высоту гибкости.

Примеры Firefox и IE с использованием родительской высоты гибкости в качестве ссылки для процентной высоты ребенка:

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

С последним обновлением этой части определения в 1998 году (CSS2) и появлением новых форм высоты таких как высота гибкого диска, обновление кажется слишком запоздалым.

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

Альтернативные решения

Вот две альтернативы, которые следует учитывать, если требуется, чтобы дочерний элемент принял родительскую полную высоту.

  • Применить display: flex к родительскому. Это автоматически устанавливает align-items: stretch, в котором дочерний элемент будет раскрывать полную доступную высоту родителя.

  • Примените position: relative к родительскому и position: absolute; height: 100%; width: 100% к дочернему. При абсолютном позиционировании процентная высота будет работать без определенной высоты родительского элемента.