将页脚保持在底部(页脚不必滚动)

我试图通过以下方式为页面提供额外的高度:

html {
    height: 1000px;
}

可以满足我的要求,但是页脚有问题。我想要它在底部,但 我并不一定要它随滚动移动。意思是,用户必须向下滚动才能看到页脚。

这就是我得到的:

的HTML:

<footer class="footer">
   <p>...</p>
</footer>

CSS:

footer {
    position: fixed;
    background-color: #00cca3;
    bottom: 0;
    height: 80px;
    padding-bottom: 20px;
    width: 100%;
  }

when I change position to relative the footer is in the middle of screen because it's being positioned relative to other elements. Not good.

如何在不随滚动移动的情况下在屏幕底部获得页脚?

评论
  • esaepe
    esaepe 回复

    Use position:relative; to body and position:absolute; to footer.

    body {
      height: 1000px;
      border: 1px solid red;
      position: relative;
    }
    
    footer {
      position: absolute;
      background-color: #00cca3;
      bottom: 0;
      height: 80px;
      padding-bottom: 20px;
      width: 100%;
    }
    <footer class="footer">
      <p>...</p>
    </footer>