如何使这个粘性页脚？

Question

我有这个网站.我试图让页脚成为一个粘性的页脚.我无法完成目标.请指导我.谢谢.

.site-footer {
    background-color: #000;
    font-size: 12px;
    position: relative;
    z-index: 3;
    height: 50px;
    margin-bottom:-50px;
    width: 100%;

}

注意:我试图按照这个问题但仍然无法做到.

Answer 1

position: fixed根据您特别需要的行为,您可能希望使用粘性页脚.

请考虑以下代码段;

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  background-color: red;
 }

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac bibendum magna. Etiam quis malesuada nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi hendrerit quam urna, tempus mattis nisi posuere ut. Praesent placerat diam metus, vitae feugiat mi pellentesque vitae. Pellentesque blandit consequat finibus. Sed porta, lacus blandit tempus tincidunt, lacus mauris lobortis ante, sed ullamcorper ligula metus eu est. Nullam finibus tortor sed est scelerisque efficitur non et arcu. Praesent ultricies, sem et gravida tincidunt, sem magna ultricies nulla, pretium tempor urna velit eu dolor. Quisque felis velit, maximus ut condimentum vel, efficitur quis dolor. Nunc porta accumsan suscipit. Integer vitae diam tortor. Nullam fermentum tortor non molestie dignissim. Pellentesque placerat turpis nec dictum semper.
  </p>
  <p>
    Aliquam rutrum, dolor sed elementum iaculis, nunc sem venenatis metus, ut condimentum felis augue in erat. Nam cursus non dolor vel tempus. Aenean dapibus tortor vitae accumsan pellentesque. Suspendisse non erat sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis dui in arcu vestibulum egestas eget eu magna. Mauris et erat vel dolor interdum aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec justo at mauris tempus tincidunt. Ut vestibulum massa vel pharetra ullamcorper. Quisque dapibus, massa nec venenatis pellentesque, ante justo auctor nisi, quis condimentum nulla turpis ac tellus. Quisque vitae pellentesque neque, vel pharetra turpis. Nam ultrices, nisi et ornare faucibus, risus sem vulputate erat, tincidunt ultrices lacus velit id felis. Sed eu interdum nunc. Nullam ut consectetur sem. Morbi congue, ipsum sit amet molestie fermentum, metus lorem dignissim dui, non commodo dui ipsum ac felis.
  </p>
  <p>
    In nec massa in dolor tempor posuere sit amet ac metus. Morbi venenatis mattis nunc, eget sagittis augue malesuada sed. Praesent porttitor dui laoreet lorem interdum, sed eleifend eros pellentesque. Quisque interdum turpis sed metus ornare, a condimentum elit malesuada. Cras bibendum egestas auctor. Mauris interdum laoreet dui, ut vestibulum neque vulputate congue. Nunc faucibus euismod orci, eget feugiat tellus.
  </p>
</div>
<div class="footer"></div>

注意::正文是可滚动的,页脚会粘住.

这将使页脚始终处于视图中,这是粘性时的一般假设.

希望能帮到你!