How to make modal windows dynamic in height?

Question

JavaScript

Good evening everyone! There was a problem which I can not solve for several hours.
Here , I 'm laying out one template, after you enter, click on the red marker on the map. A window will appear. There are buttons in the footer that bring up similar windows. So here's the whole question. I want to make them a fixed hat and footer. By changing the height of the content of the window, and when the window is not retracted into the monitor in height, a scrollbar will appear inside, I did it using jquery.mCustomScrollbar .

The main.js file contains the code with which I implement this idea, it looks like this:

var dynamicDialogSize = function(){
  var dialog = $('.dialog.dynamicDialogSize');

  dialog.each(function() {
    var el = $(this),
      heightFull = el.height(),
      dialogHeader = el.find('.dialogHeader'),
      dialogContent = el.find('.dialogContent'),
      dialogFooter = el.find('.dialogFooter');

    dialogContent.innerHeight(heightFull - dialogHeader.innerHeight() - dialogFooter.innerHeight());
  });
};

$('.dynamicDialogSize').on('show.bs.modal', dynamicDialogSize);
$(window).on('resize', dynamicDialogSize);

For some reason, when opened, all windows take up a height greater than it should be, an empty space appears inside, and if the browser height is reduced, then the window footer crawls out of its borders, and if you change the size of the browser window to a pixel, then everything becomes ok. Please help me solve this problem please!