Question

我是css的新手。

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

我在此页面中的问题：http://techdefeat.com/index.php

.technology {
    min-height: 203em;
}

.foot-nav {    background: #fa4b2a;}

在css这是我唯一的页脚。

请提供一些简单的参考资料，感谢您的帮助。

Answer 1

当滚动和页脚在底部时，将标题保持在顶部。

设置.technology的填充底部，这是您的主要div。这应该等于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;
}

Answer 2

对于固定标题，您可以为这两种标题提供标题：

CSS：

.header {
    position: fixed;
    width: 100%;
    z-index: 1;
}

目前我无法看到你的页脚？

Answer 3

这是我的标题解决方案。

<强> CSS

.head-bottom {
    background: #fa4b2a;
    position:fixed;
    width:100%;
    z-index:100;
}

.tech-no {
    /* position: absolute; */
    / top: -33px; /
}

<强> JS

$(window).scroll(function(e){ 
  var $el = $('.head-bottom'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $('.head-bottom').css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed)
  {
    $('.head-bottom').css({'position': 'static', 'top': '0px'}); 
  } 
});

寻找修复页脚解决方案。谢谢你们。

当底部是scrill，footer时，将Header固定在Hop上

3 个答案: