Dier_Sergio_Great
@Dier_Sergio_Great
Увлеченный человек

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

<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:s ticky отлично решает поставленную задачу.
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
1. Это вопрос к JS, так как CSS пока динамически так рассчитывать не умеет. И врядли когда начнет, ибо стили-то каскадные.
2. Никакого отношения к позицонированию данный вопрос не имеет.
3. Проблемы можно решить без JS, если реализовать верстку с помощью position:sticky.

С JS же решается следующим образом:
var header = document.querySelector('.fixed');
var content = document.querySelector('.static');
content.style.marginTop = header.offsetHeight;

В данном же виде это костыль, от которого следует оттолкнуться от при углублении в тему.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Делать это с помощью медиа запросов (например для разрешения 640 px
@media screen and (max-width: 640px){
.static{
Тут размеры для мобильной версии например
}
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы