jQuery function not working just reloading

Question

I have this function to adjust the page so that it does not scroll regardless of the device, it works at all, however, when you rotate the screen or when I change the device to inspect Google Chrome, the function does not work well, only if I do the reload on the page that works, I don't know what I'm doing wrong. I believe the problem is in the variable h, where it picks up the height, which doesn't pick up the height when modifying or rotating the device, but I'm not sure, I've tried everything

function changeSize() {
  let h = $(document).height();
  let he = $("header").height();
  let m = $("main").height();
  let f = $("footer").height();
  let l = $("ui-loader").height();
  let x = h - he - m - f - l;
  $("container").css('height', x + 'px');
}

$(document).ready(function() {
  changeSize();
  $(window).resize(function() {
    changeSize();
  });
};

Answer 1

The first issue I see is here:

  let he = $("header").height();
  let m = $("main").height();
  let f = $("footer").height();
  let l = $("ui-loader").height();
  $("container").css('height', x + 'px');

These do not select any element. Are they Class selectors or ID Selectors? I will assume Class selectors for my Example.

function changeSize() {
  let h = $(document).height();
  let he = $(".header").height();
  let m = $(".main").height();
  let f = $(".footer").height();
  let l = $(".ui-loader").height();
  let x = h - he - m - f - l;
  $(".container").css('height', x + 'px');
}

$(function() {
  changeSize();
  $(window).on("resize deviceorientation", changeSize);
};

Another issue I see here is that this does not capture any Padding or Margins.