Question

我正在尝试创建固定在页面底部的页脚，它只会在我向下滚动到底部时显示。我想这样做，因为现在是最重要的。我添加了一个加载页面，页面上显示了页脚。

那么如何让页脚始终位于页面底部。我接受有关如何在加载页面打开时隐藏它的任何其他建议。

以下是页脚的代码：

<nav class="navbar navbar-default navbar-bottom" role="navigation">
  <div class="container">
    <h1>Hello World</h1>
  </div>
</nav>

提前致谢！

Answer 1

<强> HTML

<div id="footer"></div>

<强> CSS

#footer {
    position:fixed;
    background-color:#000;
    left:0px;
    bottom:0px;
    height:100px;
    width:100%;
    display:none;
}

<强> JS

$(window).scroll(function() {
    if ($(this).scrollTop() < 100) {
        $("#footer").hide();
    }
    else {
        $("#footer").show();
    }
});

Demo here

Answer 2

请查看以下链接。

Fiddle

    .footerfix{height:4rem;}
footer{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
  background-color: #222;
}

Answer 3

这是一个很好的教程，如何在页面底部保持阻止http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

基本上你只需要为你的块添加一些样式：

.navbar {
   position : absolute;
   bottom : 0;
}

所有其他只取决于您的其他需求。

页脚总是固定在页面底部的引导程序？

3 个答案: