React应用加载状态下Footer异常上移 如何使其保持在屏幕外

开发承载大量数据、支持滚动的数据分析应用时，要求Footer固定在页面底部，该效果在数据加载完成时可正常生效。但数据加载过程中需要展示Logo作为加载提示，当前实现下加载态图片展示时，Footer会向上偏移，固定显示在加载图片的正下方，需要调整代码实现加载状态下Footer保持在屏幕外不露出的效果。

加载态渲染逻辑 #

当dataLoading状态为true时，直接返回className为loading-gif的Logo图片元素：

if (dataLoading) {
  return <img src={Logo} className="loading-gif" alt="loading" />;
}

加载态样式 #

loading-gif类现有CSS样式如下：

.loading-gif {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10%;
}

页面基础布局 #

页面根容器为绑定了layout ref、className为App的main标签，内部包含路由出口Outlet组件与Footer组件：

<main className="App" ref={layout}>
  <Outlet />
  <Footer />
</main>

现有加载态直接返回相对定位的Logo图片，元素本身高度仅为图片自身高度，无法撑满视口剩余空间。原本Footer固定在页面底部的效果依赖内容区撑满视口高度，当内容区高度不足时，Footer就会跟随内容上移，显示在加载图片下方的视口范围内。

可根据项目实际布局逻辑二选一：

• 方案1：调整布局结构，让加载态内容占满剩余视口高度，自然将Footer挤到屏幕外
  1. 先给根容器.App添加基础布局样式，保证最小高度为视口高度：

  .App {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  

  2. 修改加载态渲染逻辑，给Logo套一层占满剩余空间的容器：

  if (dataLoading) {
    return (
      <div className="loading-wrap">
        <img src={Logo} className="loading-gif" alt="loading" />
      </div>
    );
  }
  

  3. 调整对应样式，去掉Logo原有偏移属性，让容器负责居中、占满空间：

  .loading-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loading-gif {
    width: 10%;
  }
  

• 方案2：加载态下直接不渲染Footer，逻辑更简单无侵入
  直接修改布局代码，增加状态判断，加载时隐藏Footer：

  <main className="App" ref={layout}>
    <Outlet />
    {!dataLoading && <Footer />}
  </main>
  

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