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

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;
}

当数据呈现到网站时，它会停留在底部。 但开始视图是这样的：没有呈现数据。

应用程序.js：

function App() {
  return (

    <div className="App">

    <Header/>
    <Form/>
    
    <Footer/>
    
    </div>
  );
}

表单.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的东西，我会在那里修改它。