Material UI React 页脚固定显示异常问题求助

各位开发者朋友好！我这边用React搭配Material UI开发应用，现在卡在了页脚的显示逻辑上，想请大家帮忙看看怎么调整。

我的需求是这样的：

• 桌面端：页脚直接固定在页面底部，不用滚动就能看到，而且不会随着页面内容滚动
• 移动端：页脚只在滚动到页面内容的最底部时才显示，之后就固定在底部不随内容上移

我试过用CSS的display:flex、position:absolute这些方案，但都没解决问题。下面是我当前的页脚布局代码：

1. CSS样式部分（用Material UI的makeStyles） #

const useStyles = makeStyles((theme) => ({
  appWrapper: {
    display: "flex",
    height: "100vh",
    overflow: "hidden",
    flexDirection: "column"
  },
  appBodyWrapper: {
    flexGrow: 1,
    overflow: "auto",
  },
  appFooterWrapper: {
    height: "28px",
    minHeight: "28px",
    backgroundColor: "#000",
    padding: "10px 10px"
  },
}));

2. JSX结构部分 #

<div className={classes.appWrapper}>
  <div className={classes.appBodyWrapper}>
    {/* 页面内容组件 */}
  </div>
  <footer className={classes.appFooterWrapper}></footer>
</div>

现在遇到的问题是：桌面端需要滚动两次才能看到页脚，完全不符合“直接在底部显示”的需求；移动端的页脚表现也不对，没能做到在内容底部固定停留。

有没有朋友能帮忙分析下问题出在哪，或者给个可行的调整方案呀？

备注：内容来源于stack exchange，提问作者Internazionaleauto