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

Posted 2023-03-21

【中文标题】带有 Bootstrap 的 React 组件的页面布局 - 页脚未保留在原位

【英文标题】：Page layout for React component with Bootstrap - footer not remaining in place

【发布时间】：2021-12-12 09:33:26

【问题描述】：

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

我目前解决这个问题的策略是尝试使用 flex-grow 属性将页脚推到视口的底部，但我无法在需要时让间隔扩展。关于到目前为止我尝试过的内容，我已经广泛阅读了有关堆栈溢出的内容，并且我已经断断续续地研究了几天，并且我尝试了不同的 css 属性和 Bootstrap 类的几次迭代，包括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>
  );

我还尝试通过类名添加 .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;

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

【问题讨论】：

将此添加到您的身体中，min-height: 100vh;

非常感谢 Karthik。恐怕那个建议没有解决它。感觉某些样式以某种方式被覆盖，但不确定如何或为什么。

我的错，高度应该在有d-flex类的div上。

【参考方案1】：

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

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

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

---

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

【讨论】：

您好，Karthik - 向 App.js 级别的 div 包装器添加样式道具似乎已经做到了！谢谢你的伙伴 - 我真的很感谢你的帮助。值得注意的是，我仍然必须包含分隔符 div，否则页脚元素会扩展到页面上的可用空间。虽然吸取了教训。再次感谢。以您的方式传递良好的氛围。

嗯，页脚不应占用额外空间，除非您有 flex:1 或 flex-grow: 1。无论如何，很高兴它的工作。一切顺利。