如何让页脚停留在页面底部？

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.