Автоматический отступ в зависимости от высоты блока

Question

<nav style="position: fixed; height: 80px;">
</nav>
<section>
	<div style="margin: 80px 0px 11px 0px;">
  </div>
</section>

У меня есть блок с position: fixed (фиксированный), который меняет высоту (height: auto; высота зависит от контента в нём), а также второй, статичный блок. Мне надо чтобы для статичного блока устанавливался отступ сверху равный высоте фиксированного блока. Вот как сделать этот "авто отступ", чтобы он зависел от высоты фиксированного блока. Высота фиксированного блока меняется при сжатии страницы, то есть в реальном времени. Возможно как-то на JS это можно или вообще на чистом CSS?

Answer 1

// получаем все элементы на странице
const фиксированный = document.querySelector('.фиксированный')
const статичный = document.querySelector('.статичный')
const кнопка = document.querySelector('button')

// вешаем событие клик на кнопку
кнопка.addEventListener('click', function() {
  // создаем какой-нибудь элемент
  // просто для примера, что бы увеличивалась высота
  // фиксированного блока
  const что_нибудь = document.createElement('div')
  что_нибудь.innerText = 'йцукен'

  // добавляем его в фиксированный блок
  фиксированный.append(что_нибудь)
})

// конфиг для наблюдателя
// childList - наблюдение за удалением и добавлением элементов
// полный список того, за чем можно наблюдать, можно посмотреть здесь
// https://developer.mozilla.org/ru/docs/Web/API/MutationObserver
const конфиг = {
  childList: true
}

// когда в элементе произошли изменения
function элементИзменился() {
  // увеличиваем маргин статичного элемента на высоту фиксированного
  статичный.style.marginTop = фиксированный.getBoundingClientRect().height + 'px'
}
// создаем наблюдателя
const наблюдаетль = new MutationObserver(элементИзменился)

// и говорим ему следить за изменениями в фиксированном блоке
наблюдаетль.observe(фиксированный, конфиг)

body {
  margin: 0;
}

.статичный {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.фиксированный {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: auto;
  background-color: lightgreen;
}

button {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="фиксированный">123</div>
<div class="статичный"></div>

<button>Добавить что-нибудь</button>

БЛОГ НА HUSL

Автоматический отступ в зависимости от высоты блока

Ответы (1 шт):