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

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

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>
点赞
评论