Разметка CSS флюида: маржинальная вершина, основанная на процентах, увеличивается при увеличении ширины контейнера

This question already has an answer here:

How to set the margin or padding as percentage of height of parent container? 8 answers

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

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

Здесь скрипка. Заранее благодарны за Вашу помощь.

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

 atilkan02 мая 2016 г., 01:43
Единицы просмотра для CSS vw, vh 1vw = 1% от ширины области просмотра 1vh = 1% от высоты области просмотра

Ответы на вопрос(2)

Решение Вопроса

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

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

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

 Mr. TA21 авг. 2013 г., 05:43
@ ChuckKollars Я думаю, они могли бы сделать это двумя способами: разные по высоте, чем по краю. Я понимаю, почему они сделали этот выбор, но я все еще не согласен с этим.
 Mr. TA19 июн. 2013 г., 18:43
 Gregir17 мая 2012 г., 05:40
Спасибо, Чак. Мне действительно нужно было использовать процентные значения для полей, поскольку интерфейс, который я создаю, будет колебаться очень широко, от большого до маленького, и если мои большие элементы станут очень маленькими, но между ними будет отступ в 1em, это будет выглядеть странно. Что касается длинных значений точности, я взял идею из A List Apart Alistapart.com / статьи / жидкость-изображения) и фактически не планировал использовать их в производстве. В любом случае, ваше предложение относительно: пустой div там будет работать просто отлично; это просто / элегантно, и жаль, что я не думал об этом сам. Еще раз спасибо
 Chuck Kollars18 авг. 2013 г., 04:32
@Мистер. Т.А. - Я понимаю, почему спецификация такая. Если процент верхнего и нижнего полей был изменен, чтобы быть относительнорос, в то время как проценты левого и правого полей остались относительно Ширина, не было бы никакого способа указать поля (и отступы) в процентах, но также иметь их Равно все вокруг. (Это также основа странного CSS-хака для поддержания соотношения сторон элемента.) Это трудный выбор; сделайте глубокий вдох, прежде чем придете к выводу, что это просто "недостаток дизайна".
 Triynko17 нояб. 2015 г., 19:08
Массивный недостаток дизайна наверняка. Если вы хотите, чтобы поля были одинаковыми, используйте единицы измерения, например EM, которые относятся к единичному измерению, например, к размеру шрифта. Процент, как и EM, являются относительными единицами, но в отличие от EM, процент относится к двум потенциальным измерениям - ширине или высоте. Обрабатывать его как всегда относительно ширины, даже в полях, связанных с HEIGHT, не только безумно неинтуитивно, но также делает невозможным сворачивание дочернего элемента с полем -100%, чтобы он «скользил как ящик» в это родитель, чтобы скрыть это. Ужасный, ужасный, ужасный недостаток дизайна.

это неожиданно и нелогично, но оно работает так, как задумано, и я понятия не имею, почему он работает так, как работает. Видеть margin-top процент не изменяется при уменьшении высоты окна

 Gregir17 мая 2012 г., 05:21
Weird. И мне жаль, что я пропустил это в моем поиске в стеке ранее. Не знаю, как обойти это, но я думаю, что мне лучше надеть мои мысли. Благодарность

Ваш ответ на вопрос