【发布时间】：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上。