在页面外部滚动时，使页脚停留在底部

Question

我制作了一个粘性页脚，当页面当前未滚动时，该页脚非常有用。 但是出于动画方面的考虑，Safari和Chrome（可能还有其他）将我的页面移出了其内容之外。此功能可以在到达页面末尾时不突然停止滚动。 这是什么样子。

如何用页脚隐藏页面的外部？我希望它的颜色像我的页脚一样呈灰色。但是相反，它是白色的，我们可以看到我的蓝色侧栏。这真的很丑。

有什么主意吗？

编辑：

在这里我使用的CSS使其具有粘性

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #434343;
    color: white;
    font-size: 12px;
    text-align: center;
    z-index:200;
}

我尝试使用底距为底的负数来延长它的长度，但是导航器将其滚动得更多，这只会使问题向前移动一些像素。

当然，我不想在滚动时有固定的页脚。 问题实际上是页面边缘的美丽。以及到达时的动画。

编辑2：

Here an sample code if you want to play with it

滚动太多时会看到什么（我不希望页脚后面有白色部分）

Answer 1

您只需要固定位置的.footer：

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: white;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 64px;
    background-color: gray;
}

.footer-placeholder {
    width: 100%;
    height: 64px; /* Same as for footer*/
}

<div style="position: relative">
Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents.
Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents. Some random text to make up some contents.
<div class="footer-placeholder"></div>
<div class="footer">

</div>
<div>

还要注意，您的html正文应具有100％的高度，因此即使页面内容很少，页脚也位于底部。否则，您的身高将与内容物相同，并且页脚将“悬空”

Answer 2

这里是一个解决方案。我做了一个简单而不是真正的页脚。但是，当我滚动时，几乎看不到蓝色div之后的白色部分。这就是我想要的。

最后一个问题是：是否最佳？我们可以不用js吗？

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        //alert("you're at the bottom of the page");
        $('#footer').show();
    }
    else{
        $('#footer').hide();
    }
};

.footer{
  background-color:red;
  width:100%;
  height: 50px;
  display:none;
  position:fixed;
  bottom:0;
  z-index:-1;
}

.rectangle{
  background-color:blue;
  width:100%;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum justo ac tellus placerat, nec lacinia urna iaculis. Vestibulum eget tincidunt justo. Maecenas facilisis lectus at eros scelerisque, id bibendum risus gravida. Sed id ligula pharetra, lacinia nibh sit amet, ultrices tortor. Mauris vitae tortor rutrum, volutpat turpis sit amet, lobortis nunc. Pellentesque convallis est diam, sed vehicula lacus tempor ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="rectangle"></div>
<div id="footer" class="footer"></div>

Answer 3

您是否已与各自的div尝试了以下方法，或者共享了代码以获得更好的答案。

     position:fixed;
     bottom: 0;
     width: 100%;