React组件结合Bootstrap布局时footer无法固定在页面底部问题求解

你的flex布局不生效的核心原因是承载所有内容的最外层flex容器没有设置最小视口高度，默认高度只会跟随内容高度变化，所以flex-grow属性没有足够的剩余空间可以分配，按以下步骤修改即可：

第一步：调整全局基础样式 #

先确保html和body元素占满整个视口高度，清除默认边距避免多余滚动条：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

footer {
  width: 100%;
  height: 150px;
  background-color: var(--blue-yonder-light);
  border-top: var(--blue-yonder) 1px solid;
  /* 如果Footer组件不支持透传类名，可在这里加 margin-top: auto 替代下方的mt-auto类 */
}

你原来给body设置的display:flex规则可以删掉，不需要。

第二步：修改App.js容器配置 #

给最外层flex容器加min-vh-100 Bootstrap类，让它的最小高度始终等于视口高度，同时可以直接删除多余的spacer元素，用mt-auto类把Footer自动推到底部：

return (
    {/* 新增min-vh-100类，保证容器最小高度占满视口 */}
    <div className="d-flex flex-column min-vh-100">
      <Header />
      <SearchBar data={state} handler={filterRes} />
      <CurrencyContainer
        loading={loading}
        error={error}
        errorMessage={errorMessage}
        data={data}
        pagData={currentPageData}
      />
      {!loading && data.length > 25 && !error && (
        <PaginationComp pageCount={pageCount} clickHandler={handlePageClick} />
      )}
      {/* mt-auto会自动占据flex容器的剩余垂直空间，把Footer顶到底部 */}
      <Footer className="mt-auto" />
    </div>
  );

修改完成后，当内容高度不足时，Footer会固定在视口底部；当内容高度超过视口时，Footer会被内容顶到页面最底部，完全符合需求。

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