如何使页脚停留在页面的底部?

Question

我试图建立一个简单的单页反应项目，其中数据是从公共API获取，然后它呈现数据到网站。在给我的项目设计样式时，我偶然发现了一个问题，我的页脚组件没有留在网站的底部。

我用谷歌搜索了样式的解决方案:

.footer__container {
margin: auto;
width: 100%;
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-color: #efefef;
text-align: center;
}

如果数据没有呈现到站点中，这个工作很好:正确

但是当数据呈现到网站时，页脚组件停留在相同的位置。当向下滚动时，它不会移动。示例

不包含position: absolute;和样式

.footer__container {
margin: auto;
height: 60px;
background-color: #efefef;
margin-top: 2.5rem;
text-align: center;
}

当数据呈现到站点时，留在底部。但开始视图是这样的:没有数据渲染。

App.js:

function App() {
return (
<div className="App">
<Header/>
<Form/>

<Footer/>

</div>
);
}

Form.jsx

return (
<div className="form__section">
<form onSubmit={handleFetch}>
<input 
value={word}
onChange={(e) => setWord(e.target.value)}
id='enter__word'
className='form__input'
></input>
<button>Search</button>
</form>
<div className='word__section'>
{synonyms.map((synonym) => (
<div className="word__container" key={synonym.word}>
<ul>
<li>
{synonym.word}
</li>
</ul>
</div>
))}
</div>
</div>
)

Answer 1

请去掉position: absolute;，将min-height: calc(100vh - HEADER_HEIGHT - FOOTER_HEIGHT)加入form__section。

如果你有像CodeSandbox这样的东西，我将在那里修改。