Как задавать в % размеры всегда относительно body?

Question

[protasovmikhail]

Как задавать в % размеры всегда относительно body?

Независимо от степени вложенности и наследования вообще.

Спасибо.

Answer 1

[Nikolay Talanov]

У вас очень размытый вопрос.
Если вас интересуют только %, причем для всех элементов включая текст, то вам помогут viewport единицы, такие как vw(от ширины)/vh(от высоты). То есть блок width: 30vw; height: 20vh; будет всегда занимать 30% от ширины window и 20% от его высоты. Но на этом способе вы максимум только топорный прототип сделаете, и вообще их используют для вещей аля "блок с высотой в весь экран" что эквивалентно 100vh.

Comments

[protasovmikhail]

почему топорный?
есть побочные эффекты?

[Nikolay Talanov]

protasovmikhail: Если речь идет о статичном, не адаптивном сайте для десктопа, то проблем особых не будет. Но при нестандартных соотношениях ширины/высоты на экране будет происходить наркомания :) Для этого кстати есть дополнительные вьюпорт еденицы, такие как vmin/vmax, с помощью которых можно настраивать поведение при нестандартных ситуациях. Тут тут простое сравнительное описание.

[Nikolay Talanov]

Nikolay Talanov: Хм, запостил ссылку и не вижу её. shpargalkablog.ru/2013/03/px-em-calc.html попытка номер два.

Answer 2

[Роман]

Может использовать rem ?

Comments

[protasovmikhail]

Вроде тоже на пиксели завязаны..

Answer 3

[Матвей Мамонов]

Ну если задача именно такова, то, по идее, у body должен быть position: relative;, а у остальных элементов (которые относительно body должны размер иметь) position: absolute;.

По идее, задача решается таким образом, но она приведет к некоторым побочным эффектам.