Как реализовать такое?

Question

[wakenbyWork]

Как задать margin-top через процент. Чтобы чем меньше была ширина родителя то margin-top становился больше.

Например если установить margin-top: 20% то при сжатии родителя, margin-top будет уменьшатся. Как сделать обратное? Чтобы чем меньше ширина родителя тем больше margin-top?

Comments

[Beliyadm]

Могу ошибаться, но никак - margin в процентах берет данные от родителя, отрицательный margin выкинет внутренний блок за пределы родителя.
Если вопрос не в динамике - то лучше через медиа запросы проставить несколько ключевых значений под разрешение.

[Антон Литвиненко]

подпишусь, может кто через calc чтото придумает

[lamer350]

Ну если как то так, все конечно от ситуации зависит, не везде применимо...
https://jsfiddle.net/j602v4pe/13/

[RAX7]

При таких условиях, при определенной ширине контейнера margin станет равен 0 и при дальнейшем увеличении уйдет в минус. Если ограничить ширину контейнера, то получается простая формула margin-top: calc($maxw - 100%)
https://jsfiddle.net/eshoap57/

Answer 1

[wadowad]

Можно реализовать через padding. Например, padding-top: 30% - это верхний внутренний отступ 30% от ширины родителя. Обратное поведение можно задать через calc:

padding-top: calc(100px - 10%);

Тогда при уменьшении ширины родителя, верхний отступ будет увеличиваться.

Comments

[wakenbyWork]

Именно то что было нужно! Спасибо!

Answer 2

[Sigma Male]

Возможно вам подойдет единица измерения vh. vh и vw -- это типа как %, но их можно использовать где угодно.

Пример:
Можно задать элементу ширину равную 50% от высоты экрана добавив свойство width: 50vh. Точно также можно устанавливать и отступы.

vh -- это % от высоты экрана
vw -- это % от ширины экрана

Изменено: Думаю вам подойдет такой вариант https://www.youtube.com/watch?v=eaOAY0vIB4U&ab_cha...