使用AdminLTE模板的HTML页面出现双scrollbar-y滚动条，删除后无法滚动到页脚怎么办？

问题现象截图：

问题根源 #

AdminLTE默认给html、body、.wrapper、.content-wrapper多个容器设置了纵向滚动属性，双滚动条是多个元素同时配置了overflow-y: auto/scroll导致的。单独移除某一个元素的滚动属性后，剩余容器的高度计算逻辑不匹配，就会出现滚动范围不足、无法触达页脚的问题。

修复步骤 #

• 保留body作为唯一全局滚动容器，禁用其他AdminLTE原生容器的滚动属性，将以下CSS添加到自定义样式文件中，需要保证自定义样式加载顺序晚于AdminLTE原生CSS文件：

/* 禁用非body容器的纵向滚动，重置高度逻辑 */
.content-wrapper, .wrapper, .main-sidebar {
  overflow-y: visible !important;
  min-height: unset !important;
  height: auto !important;
}
/* 统一body滚动配置 */
html, body {
  overflow-x: hidden;
  overflow-y: auto !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
}

• 如果使用AdminLTE 3及以上版本，需要同步关闭JS布局逻辑里的滚动配置，在页面初始化JS中添加以下代码：
  $('body').Layout({ autoScrollToFocus: false, scrollToBottom: false });
• 如果修复后底部仍有遮挡，可在页脚标签前添加占位元素，高度设置为页脚的实际高度即可。

内容的提问来源于stack exchange，提问作者Graciela