具有 Bootstrap 的 React 组件的页面布局 - 页脚未保留在原位

Question

提前感谢您的时间和关注。这里是新手开发人员，试图完成 React 组件的布局。我正在使用 bootstrap 并根据需要添加 css。该组件本质上是一个单列页面，其中包含一个动态呈现内容的主要子组件。我的问题是，当动态组件的高度不足以将页脚推到那里时，我无法让页脚保留在页面底部。当动态组件呈现一定数量的子项时，页脚位置正确，但这只是因为它被推到页面底部。我已附上截图来演示。

我目前解决这个问题的策略是尝试使用 spacer 通过 flex-grow 将页脚推到视口的底部属性但是当我需要它。关于我到目前为止所做的尝试，我广泛阅读了有关堆栈溢出的文章，并且我已经断断续续地研究了几天，并且我已经尝试了几次不同 css 属性的迭代和 Bootstrap classes，包括 margin-top-auto，各种位置设置和其他。我正在为这个撕掉我剩下的几根头发，非常感谢任何帮助。部分相关代码如下：

App.js
     
return (
    <div className="d-flex flex-column">
      <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} />
      )}
      <div className="spacer flex-grow">spacer</div> //The spacer is here for now but I'll move this into a component when I get it working
      <Footer />
    </div>
  );
}

我还尝试通过 class 名称添加 .css 属性，这些属性显示在控制台中，但不影响页面的显示。

我应用的当前 css 属性如下，尽管如我所说，我尝试了各种组合都没有效果。

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-content: stretch;
}

.spacer {
  background-color: lightgreen;
  flex-grow: 3;
}

footer {
  width: 100%;
  height: 150px;
  background-color: var(--blue-yonder-light);
  border-top: var(--blue-yonder) 1px solid;
}

很高兴根据需要提供更多代码。这个问题感觉超级业余，但我已经足够坚持寻求帮助，所以在此先感谢您的任何建议。

Answer 1

好的，所以你是在正确的轨道上。你不需要任何类型的垫片。

您需要为弹性容器设置最小高度，如下所示。

<div className="d-flex flex-column" style={{min-height: '100vh}}>

这是一个复制最少的例子。 Stakblitz Solution

具有 Bootstrap 的 React 组件的页面布局 - 页脚未保留在原位

Page layout for React component with Bootstrap - footer not remaining in place

css

layout

footer

reactjs