Подтвердить что ты не робот

Раскладка флюида CSS: margin-top на основе процента увеличивается при увеличении ширины контейнера

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

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

Вот скрипка. Благодарим вас за помощь.

http://jsfiddle.net/gregir/aP5kz/

4b9b3361

ОТВЕТЫ

Ответ 1

В CSS все четыре поля: и заполнение: проценты относятся к ширине... хотя это может показаться бессмысленным. Это так, как спецификация CSS, вы ничего не можете с этим поделать.

Можете ли вы сделать то, что хотите, вместо "ex" (или "em" )? То, как я привык видеть "текучие" значения для поля/заполнения, указанным... и это может быть менее проблематичным, чем проценты. (Хотя у меня нет соответствующего опыта из первых рук, я подозреваю, что чрезвычайно длинные рекомендации по вашим рассчитанным процентным значениям помогут вам позже установить проблемы с несовместимостью браузера. Мой стиль заключается в том, чтобы ограничить проценты CSS целыми числами, если это вообще возможно, или иногда возможно одна, а может быть, даже две цифры после десятичной точки.)

Если вы действительно хотите, чтобы точное пустое вертикальное пространство произвольного размера составляло процент от контейнера, первое, что приходит мне в голову, это отдельный пустой <div> с спецификацией CSS "height: nn%". Или, возможно, что-то другое, о котором вы указываете, уже обрабатывает вертикальные размеры, которые вы так хотите (так как казалось бы, поля на самом деле ничего не делают при вертикальном изменении размера).