Получить высоту элемента - jQuery

Question

Я ищу способ установить высоту некоторых секций равной 100vh, если нормальная высота секции (высота, определяемая содержимым) меньше высоты области просмотра.

По этой причине я использую следующий код:

$(function() {

  var windowWidth = $(window).width();
  var windowHeight = $(window).height();

  $('section').each(function (index, value) {

    console.log($(this).attr('id') + ': ' + $(this).outerHeight());

    if ( windowWidth > windowHeight && windowHeight > $(this).outerHeight()) {
      $(this).addClass("total");
    }

    else {
      $(this).removeClass("total");
    }

  });

});

Журнал консоли говорит, что один из моих разделов имеет высоту 880 пикселей, в то время как в действительности он имеет 906 пикселей. По этой причине класс добавляется, даже если дисплей слишком маленький, что приводит к ужасному дизайну...

Я думаю, что я знаю, почему высота возвращается, но я понятия не имею, как сделать это правильно...

Раздел, о котором мы говорим, содержит круглые индикаторы выполнения, которые анимированы этим плагином. Так что можно сказать, что круги еще не загружены, но они есть! Однажды я определил функцию перед определением окружностей, а затем высота в журнале консоли была точно такой же, как высота окружностей, меньшая, чем сейчас. Таким образом, разница в 26 пикселей должна быть вызвана чем-то другим.

Если я войду $('#sectionID').outerHeight() в консоли браузера возвращается правильная высота, поэтому кажется, что какой-то элемент не был загружен при выполнении каждой функции. Но эта функция находится внутри функции готовности документа, так что это не должно быть так...

У кого-нибудь есть идея?

---

Код круга

var size = "130";

var progress1 = $('.progress1'),
    inited_progress1 = false;

progress1.circleProgress({
  value: 0,
  size: size,
  lineCap: "round",
  fill: {
    gradient: ["#00C853", "#00E676"]
  }
});

progress1.appear(
  { force_process: true }
);

progress1.on('appear', function() {
  if (!inited_progress1) {
    designer.circleProgress({
      value: 0.65,
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#7CB342", "#689F38"]
      }
    });

    inited_progress1 = true;
  }
});

Их восемь. А на обычных экранах они отображаются в два ряда.

---

Постановили

Благодаря идее zsawaf я смог решить проблему без использования JavaScript.

Вот код SCSS/CSS:

section {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (orientation: landscape) {
  section {
    min-height: 100vh;
  }
}