Javascript 调整大小时显示弹性和位置绝对冲突

我有main元素和footer，main元素是

display:flex和页脚为
位置：绝对为了保持在底部，在调整大小（移动）之前，它工作正常。
调整大小以查看页脚冲突

我想保持在底部的页脚移动太多


#主{显示：flex；
柔性包装：包装；
填充：10px；
利润率：10px；
调整项目：灵活启动；
字体大小：40px；
}
#主要部门{
利润率：10px；
}
页脚{
位置：绝对位置；
底部：0；
颜色：红色；
文本对齐：居中；
}

JS-Bin
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
页脚
我以前遇到过这个问题，发现添加一个JavaScript文件有助于计算屏幕大小

window.addEventListener("load", activateFooter); 
  function activateFooter() {
  adjustFooterSticky();  
  window.addEventListener("resize", adjustFooterCssTopToSticky);
  }

  function adjustFooterSticky() {
    let footer = document.querySelector("#footer");
    let bounding_box = footer.getBoundingClientRect();
    let footerHeight = bounding_box.height;
    let pageHeight = window.innerHeight;
    let aboveFooter = bounding_box.top - TopAttribute(footer);

   if (aboveFooter + footerHeight <= pageHeight) {
    let new_footer_top = pageHeight - (aboveFooter + footerHeight);
    footer.style.top = new_footer_top + "px";
   } 
  else if (aboveFooter + footerHeight > pageHeight) {
    footer.style.top = null;
  }
}

function TopAttribute(htmlElement) {
  let top_string = htmlElement.style.top;
  if (top_string === null || top_string.length === 0) {
   return 0;
  }
  let top_pixels = top_string.substring(0, top_string.length - 2);
  return parseFloat(top_pixels);
}

window.addEventListener（“加载”，激活Footer）；
函数activateFooter（）{
调整页脚粘性（）；
window.addEventListener（“调整大小”，adjustFooterCssTopToSticky）；
}
函数adjustFooterSticky（）{
让footer=document.querySelector（“#footer”）；
让bounding_box=footer.getBoundingClientRect（）；
让footerHeight=边框高度；
让pageHeight=window.innerHeight；
设UpperFooter=bounding_box.top-TopAttribute（页脚）；
如果（页脚以上+页脚高度页高）{
footer.style.top=null；
}
}
函数TopAttribute（HtmleElement）{
让top_string=htmlElement.style.top；
if（top_string==null | | top_string.length==0）{
返回0；
}
让top_像素=top_string.substring（0，top_string.length-2）；
返回parseFloat（顶部像素）；
}

然后，在任何屏幕大小上，都可以将页脚定位在屏幕大小的底部
您可以简单地使用媒体查询来定义当您在此处切换媒体是移动设备的媒体查询时您应该使用的元素的位置和大小

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}


下面是您的示例，如果您将其调整为移动，则页脚将保持在底部


#主{
显示器：flex；
柔性包装：包装；
填充：10px；
利润率：10px；
调整项目：灵活启动；
字体大小：40px；
}
#主要部门{
利润率：10px；
}
页脚{
位置：绝对位置；
底部：0；
颜色：红色；
文本对齐：居中；
}
@媒体屏幕和（最小宽度：320px）和（最大宽度：480px）{
页脚{
底部：0；
}
}

赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
赫尔
页脚
您是否尝试了页脚的
位置：已修复
？怎么不起作用？也许你应该在其他媒体上尝试向下滚动上面的片段！在浏览器中进行检查，没有障碍物