js底部导航栏在内容不够时固定在底部，内容足够时随着页面滚动下滑

前几天做一个页面，遇到一个问题，在内容足够，底部导航栏不用做特别处理；在内容不够时，底部导航栏在页面内容下面出现，导致页面底部有大量留白；

想实现效果，当内容不足时，底部导航栏固定在页面底部，内容足够时，底部导航栏不需要固定到页面底部

解决思路：动态写入内容部分最小高度：

                  内容最小高度=当前屏幕高度-顶部导航高度-底部导航高度

代码：

let header = document.querySelector('.banner-other');
let headerHeight = header.offsetHeight
console.log(headerHeight, '---头部高度---');

let footer = document.querySelector('.footer');
let footerHeight = footer.offsetHeight;
console.log(footerHeight, '---底部高度---');

let currentHeight = window.innerHeight;
console.log(currentHeight, '---当前屏幕高度---');

let minHeight = currentHeight - footerHeight-headerHeight ;
console.log(minHeight, '---最小高度---');
$('.main').css({
	'min-height':minHeight
})