Question

我希望页脚停留在底部，但不要在其他元素之前。

我尝试过使用位置和底部，但是固定在元素上方，并且绝对不是“即使在底部”，它也仅位于您所看到的底部，但是如果向下滚动，它将停留在该位置。

<footer>
   <span style="position: relative; display: block; top: 50%; transform: translateY(-50%);">Copyright Duarte Arribas © 2019</span>
</footer>

footer{
    display: block;
    position: absolute; /*tried fixed also*/
    background: #262626;
    width: 100%;
    height: 15%;
    bottom:0;
    color: #fff;
    text-align: center;
}

Answer 1

一个简单的技巧是在主滚动容器的底部添加等于页脚高度的填充。

HTML：

<div class="mainContainer">
    Site Content
</div>
<footer>
    Footer stuff
</footer>

少：（使用CSS预处理程序非常适合此类变量。如果您使用的是纯CSS，不幸的是IE不支持CSS变量，因此您需要内联footerHeight值）

@footerHeight: 40px;

.mainContainer {
    padding-bottom: @footerHeight;
}

footer {
    position: fixed;
    bottom: 0;
    height: @footerHeight;
}

Answer 2

我相信您要查找的是一个“粘性页脚”，当页面的内容小于页面时，它会停留在页面底部，但是在较长页面上，它会滚动到页面底部内容，而不是固定在视口底部。为此，大多数解决方案都要求您在页面其余内容周围有一个包装。我最喜欢的解决方案之一是使用flexbox容纳任意高度的页脚：

// only used for demonstration, this can be ignored
function addContent () {
  var newEl = document.createElement('p');
  newEl.innerHTML = 'Content';
  document.querySelector('.content').appendChild(newEl);
}

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content {
  flex: 0 1 100%;
}
.footer {
  background: #0094ff;
  margin: 0;
  flex: 0 0 auto;
}

<body>
  <div class="content">
    <button onclick="addContent()">Add content</button>
    <p>Content</p>
  </div>
  <footer class="footer">
    Footer of arbitrary height
  </footer>
</body>

有关更多示例和其他实现方法，请参见Sticky Footer, Five Ways或在Google中搜索“ CSS粘性页脚”。

如何将某些内容粘贴到底部，但不与其他元素重叠

2 个答案: