Как сделать отступ блока MARGIN-TOP равный высоте другого блока с POSITION: FIXED;?

Question

[Сергей Кореневский]

<div class='fixed'>
Main menu
</div>
<div class='static'>
Article<br>
One<br>Two<br>Three<br>For<br>Five<br>Six<br>Seven<br>Eith<br>Nine<br>Ten<br> .<br>.<br>.<br>.<br>.<br>.
</div>

Вопрос профессионалам, дайте совет пожалуйста. Как сделать у последовательных блоков, во втором отступ равный высоте первого блока с фиксированной позицией.
Суть в том что первый блок это привязанное меню к верхнему краю сайта.
а следующий блок это прокручиваемое содержимое. С изменением ширины сайта, верхнее меню выстраивается в две строки, например при низком разрешениие или при вертикальном положении смартфона.
Таким образом нижний блок должен изменить отступ с учетом того что меню в верхнем блоке стало в две строки.
Если есть другие варианты с вложением, пишите обязательно.
Спасибо @ArsenyMatytsyn
решение сposition:sticky отлично решает поставленную задачу.

Answer 1

[Сергей Сорокин]

Делать это с помощью медиа запросов (например для разрешения 640 px

@media screen and (max-width: 640px){
.static{
Тут размеры для мобильной версии например
}
}

Comments

[Сергей Кореневский]

а как нибудь можно в фиксированном блоке создать блок который будет статическим? он и будет создавать отступ.

Answer 2

[Арсений Матыцин]

1. Это вопрос к JS, так как CSS пока динамически так рассчитывать не умеет. И врядли когда начнет, ибо стили-то каскадные.
2. Никакого отношения к позицонированию данный вопрос не имеет.
3. Проблемы можно решить без JS, если реализовать верстку с помощью position:sticky.

С JS же решается следующим образом:

var header = document.querySelector('.fixed');
var content = document.querySelector('.static');
content.style.marginTop = header.offsetHeight;

В данном же виде это костыль, от которого следует оттолкнуться от при углублении в тему.

Comments

[Сергей Кореневский]

А как сделать с использованием position:sticky?

[Арсений Матыцин]

Сергей Кореневский, https://codepen.io/i-am-studio_ru/pen/zYGwQNr

Чтобы понять — в документацию. Чтобы визуально пронаблюдать — больше текста с переносом в шапку, так будет нагляднее.