How to make footer stay at bottom of the page? - css

Question

Im trying to build a simple single page react project where data is fetched from a public API and then it renders the data to the site. When styling my project I stumbled across a problem where my footer component doesnt stay at the bottom of the site.
I googled the solutions with stylings like :
.footer__container {
margin: auto;
width: 100%;
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-color: #efefef;
text-align: center;
}
This works good if data is not rendered into the site : Correct
But when data is rendered to the website, the footer component stays at the same place. When scrolling down, it doesnt move along. Example
Without position: absolute; and styling
.footer__container {
margin: auto;
height: 60px;
background-color: #efefef;
margin-top: 2.5rem;
text-align: center;
}
it stays at the bottom when data is rendered to the site. But the start view is this : Without data rendered.
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

Please remove the position: absolute; and add the min-height: calc(100vh - HEADER_HEIGHT - FOOTER_HEIGHT) to form__section.
If you have something like CodeSandbox, I will modify it there.