html - 滚动时将页眉固定在 Hop，底部固定页脚

Question

我是 CSS 新手。

如何在页面的完整底部显示页脚

我在这个页面的问题:http://techdefeat.com/index.php

.technology {
    min-height: 203em;
}

.foot-nav {    background: #fa4b2a;}

在 CSS 中这是我唯一的页脚。

请提供一些简单的引用，感谢您的帮助。

Answer 1

滚动时页眉在顶部，页脚在底部。

为您的主要 div .technology 设置 padding-bottom。这应该等于你的 footer

的高度

JS(jQuery):

$(function(){
  $(window).scroll(function(){
    var headTop = $('.header-top').height();
    if($(this).scrollTop()>=headTop){
       $('.head-bottom').addClass('head-top');
    else
       $('.head-bottom').removeClass('head-top');
    }
  });
});

CSS:

.head-top{
    position: fixed;
    width: 100%;
    z-index: 999;
}

.technology{
  overflow:hidden;
  padding-bottom: 180px; // must be same height as the footer
}
.foot-nav {
  position: relative;
  margin-top: -180px;
  height: 180px;
  clear:both;
}