如何创建始终可见的页脚？

Question

我试图创建一个粘性页脚，但它不起作用。无论用户在我的页面上滚动

，我都希望页脚始终可见

I want the version on the left, I'm getting the right however

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Answer 1

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

您必须使用固定而不是绝对。 查看此链接W3Schools，它会对您有所帮助。

Answer 2

试试这个：

位置：已修复

https://jsfiddle.net/pablodarde/gyszqx99/

<强> HTML

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie placerat ligula. Vivamus tempus mauris enim, pellentesque vehicula augue bibendum vel. Phasellus et ultrices risus, maximus posuere sapien. Vestibulum et condimentum nisl, sed facilisis turpis. Vivamus suscipit ultricies lorem et imperdiet. Aliquam ut semper ante, nec aliquet arcu. Phasellus ut magna et dolor hendrerit pulvinar sed vitae erat. Morbi ultrices tristique tristique. Donec sed condimentum risus. Nullam volutpat quam dolor, quis tempor massa ultricies non. Vivamus bibendum dapibus vehicula. Nunc molestie risus in orci lacinia dapibus.</p>
</div>
<div class="footer">
  This is the footer
</div>

<强> CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}
.content {
  width: 100%;
  height: 2000px;
  background: #f0f;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: #090;
  color: #fff;
}