要素の高さが画面100％に足りないときにフッターの位置がおかしくなるのを防ぐための調整です。jQueryとCSSの2パターン掲載しています。

まずはjQuery。
画面内の要素のうち、高さ調整したい要素(targetItem、1要素のみ)と高さ調整しない要素(staticItem、配列指定可)を指定して使います。
マークアップ構造が複雑だったり、スタイル調整のためにマークアップを変更できない場合に使いやすいです。

jQuery

(function ($) {

  //調整したい要素
  const targetItem = $('.hogeA');
    
  //調整しない要素（配列。1要素だけ指定も可）
  const staticItem = Array(
    $('.hogeB'),
    $('.hogeC')
  );

  const minHeightResize = (targetItem, staticItem) => {
    if (targetItem.length > 0) {
      const winH = $(window).height();
      const staticItems = (!Array.isArray(staticItem)) ? new Array(staticItem) : staticItem;
      const staticHarr = staticItems.map(obj => {
        if (obj.length > 0) {
          return obj.outerHeight(true);
        }
      });
      const staticH = staticHarr.reduce((t, d) => { return t + d });

      targetItem.css({ 'min-height' : (winH - staticH) + 'px' });
    }
  }

  $(window).on('load resize', function () {
    minHeightResize(targetItem, staticItem);
  });

})(jQuery);

続いてCSS。
下準備として、HTML側でマークアップ構造の調整が必要です。

HTML

<div class="wrap">
  <div class="hogeB">
    ...ヘッダーなど
  </div>

  <div class="hogeA">
    ...高さ調整したい要素
  </div>

  <div class="hogeC">
    ...フッターなど
  </div>
</div>

クラス名はjQueryでの調整の要素と合わせています。
このHTMLに対してスタイル設定します。

CSS

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.hogeA {
  flex: 1 1 auto;
}

[flex: 1 1 auto;]は、[flex-grow: 1;]と同じ意味です。flex-shrink、flex-basisと合わせて一括指定できるショートハンド。

サイトによってはHTML側の調整が難しいかもしれませんが、この構造が作れると記述がかなりすっきりします。
高さを取得する必要もなくなるので、構造さえ保てればスタイルの調整が不要ですし、読み込み時にjQueryでの処理が走ることも避けられます。