javascript - Get height of element - jQuery -

i'm searching method set height of sections 100vh if normal height of section (the height defined content) smaller viewport height.

for reason use following code:

$(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");     }    });  }); 

the console log says 1 of sections has height of 880 px while has 906 px in real. reason, class added, if display small results in awful design...

i think know why height returned, have no idea on how right...

the section talking of contains circle progress bars animated this plugin. say, circles aren't loaded yet, are! once defined function before defining circles, , height in console log amount of height of circles smaller now. difference of 26 px has caused else.

if enter $('#sectionid').outerheight() in browsers console, correct height being returned, seems, element hasn't loaded when each function runs. function inside document ready function, shouldn't case...

has idea?

---

code of circle

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;   } }); 

there 8 of them. , on normal screens displayed in 2 rows.

---

resolved

thanks idea zsawaf resolve problem without using javascript.

here's scss/css code:

section {   display: flex;   align-items: center;   justify-content: center; }  @media (orientation: landscape) {   section {     min-height: 100vh;   } }