Как расположить div под фиксированной шапкой, чтобы она не наезжала на него?

Question

[OypiStudent]

Ясно, что можно так:

nav {
  top: 0px;
  height: 50px;
  position: fixed;
  width: 100%;
}

article {
  margin-top: 50px;
}

Но что, если в дальнейшем планируется изменить высоту шапки? Или вовсе заменить ее height на min-height для адаптивности?

Answer 1

[Алексей Уколов]

С min-height у вас ничего не выйдет. Если нужно фиксированное позиционирование - оберните оба тега в контейнер и позиционируйте его.

По поводу изменения высоты шапки - именно для этих целей и придумали переменные в CSS и во всех его препроцессорах.

Comments

[OypiStudent]

> С min-height у вас ничего не выйдет.
Как, вообще не получится сделать задуманное?
Т.е. min-height вообще для шапок не годится?

> оберните оба тега в контейнер и позиционируйте его
Как его позиционировать?

> для этих целей и придумали переменные в CSS и во всех его препроцессорах.
спс

[Алексей Уколов]

min-height не годится для фиксированного или абсолютного позиционирования. Позиционируйте обёртку как вам нужно - внутри будет стандартный поток.

Answer 2

[Максим Тимофеев]

1 вариант - Вам предложил Алексей
2 вариант - js скрипт, который проверяет высоту шапки и меняет отступ.
3 вариант - margin-top: 50px; если меняете height: 50px; Все равно в css лезть. Это же одно строчка.

ПС: можете посмотреть как реализован навбар у бутстрапа getbootstrap.com/components/#navbar-fixed-top

Comments

[Fortunatus]

Вы скайп спрашивали nik.fortunatus
Удалили мой пост о подработке:(

[Максим Тимофеев]

Fortunatus: )))

[Максим Тимофеев]

Fortunatus: Отправил запрос в скайп на добавление