Question

我试图让这个HTML容器粘到页面底部（而不是屏幕，页面）

即。滚动公平长度且容器位于底部的页面，但也是不需要滚动的页面，容器仍在底部。

我有这段代码：

＆＃13;

.copyright-container {
  box-sizing: border-box;
  padding-right: 20px;
  padding-left: 20px;
  background-color: black;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  color: white;
}

＆＃13;

<div class="copyright-container">
  <div class="vert-align">
    <p class="headline">
      Copyright &copy; 2017 RyanTeaches - All Rights Reserved.</p>
  </div>
</div>

＆＃13;

绝对的问题是，虽然这在内容很少的页面和我必须滚动的页面上工作正常，但它也会向上滚动 - 它位于屏幕的底部，而不是页面的底部。

我也尝试使用＆＃34;修复＆＃34;但这意味着容器一直留在屏幕上。

然后我尝试了＃34;亲戚＆＃34;虽然这对于需要滚动的页面正常工作，并且位于底部，页面内容很少，但它位于页面的中间位置。

Answer 1

要解决您的问题，您需要使用javascript：

将元素放在流的末尾，它会像你想要的那样位于页面的底部：但是，当内容太小时，你需要将元素固定在底部。屏幕。您可以在加载页面后执行此操作。

它在JQuery中做了类似的东西：

$( window ).load(function() {
  if ($(window).height() > $('#content').height() + $('#navigation').height()) {
    $('.copyright-container').css({
      position: 'fixed'
      bottom: 0
    });
  }
});

希望这有帮助！

如何使版权框坚持到页面底部

1 个答案: