Вопрос по CSS% высоты

Question

Если я определю CSS следующим образом:

div {height: 50%;} 

Будет ли это работать в большинстве современных настольных браузеров (IE8 +, FF, Safari) и мобильных браузерах (iPhone / iPad и т. Д.)

Нужно ли указывать следующие 2 дополнительных атрибута для поддержки кросс-браузерного доступа

min-height: 50%; height: auto;

Я задаю этот вопрос в контексте гибкого дизайна (то есть одна и та же страница будет масштабироваться для нескольких устройств ... для настольных ПК / планшетов / мобильных устройств) .. Поэтому, пожалуйста, дайте мне знать, какой подход должен быть предпочтительным.

Answer 1

Нет, они вам не нужны.

НО: высота только по отношению к родителю. И родительский элемент по умолчанию не имеет высоты (точнее, высоты дочерних элементов внутри него).

Так что вам нужно:

body,html { height: 100%; }

Укажите «начальную» высоту, и вам может понадобиться сохранить «цепочку высот».

Причиной минимальной высоты вместо высоты является то, что высота фиксирована - она ​​не может быть больше, чем эта, независимо от того, что внутри нее. Это может не работать правильно. Таким образом, вместо этого люди делают минимальную высоту, поэтому она настолько же мала, насколько им хочется, но может расти.

Проблема с min-height заключается в том, что он работает не во всех браузерах.