Question

我试图让我的页脚停留在页面底部，我觉得我已经尝试了所有内容。如果页面缺少内容，则页脚会在主体下方向上推。我目前对我的页脚的CSS是：

width: 100%; 
height: 50px; 
border-top: 1px solid #fff;

页脚之前的div是具有此css的容器：

padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;

我尝试用底部绝对定位页脚：0但是没有给出所需的结果。我已经尝试过清楚：在页脚和容器上都有相对位置。我尝试过固定定位，但也没有给出理想的结果。有没有人有我可以使用的解决方案？

Answer 1

搜索谷歌“固定页脚css”，第一个链接得到了解决方案

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Answer 2

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  min-height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #ccc;
}

<body>
  
  <footer>
    
  </footer>
</body>

检查一下。

Answer 3

这完美无缺

$( function () {

var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
    $( '#footer' ).css( 'margin-top', height_diff );
}

});

无法页脚留在页面底部（已经研究了答案，但无法找到解决方案）

3 个答案: