Как сделать резиновый отступ у дива?

Question

[Артём Цымбалюк]

Возможно глупый вопрос, но всё же.

Сайт на котором лежит верстка

Суть такая, даю родительскому диву 100% высоту, далее внутренним дивам фиксированную высоту и ширину, отступы делаю через %
margin-top: 5%

На мониторе в 1440х900 встает всё прекрасно, но если взять другой монитор больше чем мой, у дивов не начинают растягиваться отступы, всё остается точно так же, и тем самым на больших мониторах остается ооочень много свободного места. Либо маргин через % тут вообще роли не играет, либо я дурак

Comments

[Сергей Тутуков]

У вас что-то все плохо работает:((
на 5 итерации prnt.sc/b69toe

[Артём Цымбалюк]

Сергей Тутуков вот и я не могу разобраться((

Answer 1

[Seva Sargsyan]

А через медиа-запросы попробовал

Comments

[Артём Цымбалюк]

Seva Sargsyan а можно через делать медиа запрос не на ширину, а высоту экрана?

[Сергей Софьичев]

Артём Цымбалюк: да

[Артём Цымбалюк]

Сергей Софьичев пожалуйста можно пример с min-height если не сложно

[Константин Давыдов]

Артём Цымбалюк: media (min-height: 500px) {
.block {margin-top: 10px;}
}

[Артём Цымбалюк]

Константин Давыдов: Сергей Софьичев: Мужики, попробуйте прописать к какому нибудь элементу на сайте медиа запрос. Я уверен, что у Вас не получится. Сижу пытаюсь и не получается

Answer 2

[Zhainar]

Ну так правильно же, чем больше ширина родительского дива тем больше отступы.

Comments

[Алексей Самсонов]

дак в том и суть, что у него она остается фиксированной)

[Zhainar]

Алексей Самсонов: покажите скрин, вашего когда широко и когда нормально.

[Алексей Самсонов]

Zhainar: у него, в смысле у топикстартера

[Zhainar]

Алексей Самсонов: пардон)

[Артём Цымбалюк]

Zhainar: dz-studio.ru

Answer 3

[Никита Кит]

ты если отступ делаешь в % , то и ширину делай в %. или всё по пикселям и медиа-запросам. Так хоть не запутаешься. Проценты - злой опыт. С ними всё вечно крашится. Всё равно для планшетов и телефонов всегда надо запросами UI менять. просто чёткую систему медиа-запросов составь, перед тем как делать резину.
То есть создай первичный каркас. Кстати, тут, многие разрабы сначала создают каркас для мобильной UI сайта. а потом по возрастанию -mobile landscape - tablet - desktop - large desktop. Я советую составлять запросы согласно бутстраповской сетке, если конечно, составляешь CSS, основываясь на нём
После первичного каркаса иди от мала до велика, или от велика до мала. Тут как сердце тебе подсказывает)))

Answer 4

[Nikolay Talanov]

% для марджинов и паддингов берутся от ширины элемента, даже если речь идет о margin-top/padding-bot и так далее.

Answer 5

[novrm]

Выставление размеров ширины и высоты в процентах для div-блоков имеет разную философию.
Относительно высоты.
Для того чтобы манипулировать 100% высотой в процентах нужно выставлять следующие значения:

height: auto !important;
min-height: 100%;

начиная от body (или следующего корневого блока) всем вложенным блокам до самого последнего - иначе результат будет непредсказуем.