Question

我有一个有几页的网站。每个页面都有不同的高度（显而易见，但我提到它）。

我想要实现的是，如果页面内容低于浏览器视口，则页脚标记将获得固定位置并将与页面底部对齐。

我试过这个js：

$(function(){
if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
}
});

$(window).resize(function() {
    if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
});

和那个css：

.fixbottom {
    width: 100%;
    position: fixed;
    bottom: 0;
}


footer {
height:44px;
    background: #7abde9;
    color: #ffffff;
    text-align: center;
}

我的jquery中的顶部+44是因为我的页脚标记高度为44 iv'e使用文档准备好和窗口调整大小以确保所有情况都应该满足，但不幸的是，这似乎在任何情况下都不起作用。

任何帮助都应该得到很大的帮助

Answer 1

你不需要javascript。

有一种名为“stickyfooter”的方法，即使没有太多内容，它也可以提供一种让页脚始终位于底部的方法。

这是一个简单的例子：

html, body {
    height:100%;
}

#wrapper {
    position: relative;
    min-height:100%;
}

#main {
    padding-bottom: 44px;
}

footer {
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

请参阅此fiddle以查看其工作原理。

Answer 2

您只能使用CSS解决问题。

您的内容需要一个元素，下面的页脚需要一个元素。

<div id="container">
  <div id="content">
    <div id="main">
      Content
    </div>
  </div>
  <div id="footer">
    Footer
  </div>
</div>

给#content一个100％的最小高度并为#footer设置一个高度和反向margin-top（与高度相同）。为了保护#content中的最后一个元素不受重叠设置边缘底部。

#content {
  min-height: 100%;
}
#footer {
  height: 3em;
  margin-top: -3em;
}
#main {
  padding-bottom: 3em;  /** height of #footer */
}

以下是一个例子：

http://jsfiddle.net/GB4vA/1/

Cameron Adams写了一篇关于你的问题的文章。 http://www.themaninblue.com/writing/perspective/2005/08/29/

Answer 3

JS Fiddle

var shortContent = function() {    
  if($(window).height() > $('body').height()) {
      $('footer').addClass('shortContent');
  }

};

(function(){

   shortContent();

   $(window).resize(function() {
    shortContent();
   });

}());

简化了js并使其工作没有多少css

@MichaB你的代码需要jQuery m8

Answer 4

简单的javascript：

if (window.innerHeight > document.body.offsetHeight) {
      // code to make the footer stick to bottom
}

Answer 5

<script>
function hideMe(id)
{
    var box=document.getElementById(id);
    box.style.display="none";

}
var bodyHeight=document.getElementById("body").offsetHeight,
    windowHeight=window.innerHeight;

if(bodyHeight<windowHeight)
{


    var footer= document.getElementById("footer");
    footer.style.position="absolute";
    footer.style.left="0px"
    footer.style.top=windowHeight-footer.offsetHeight+'px';
    footer.style.width='100%';

}   
<script>

HTML上的

只是把id =＆＃34;页脚＆＃34;到你的页脚div ..你的欢迎

Answer 6

2020年可能的解决方案：将非页脚内容包装在标签中，并将该标签的最小高度设置为100vh-页脚高度：

HTML：

<main>
    <!--Page Content-->
</main>

<footer>
    <!--Footer Content-->
</footer>

CSS：

main {
    min-height: calc(100vh - <footer height>);
}

不需要JavaScript / jQuery。

Answer 7

我不喜欢包含所有内容的大包装的想法，所以我找到了这个解决方案：

html {
    position: relative;    /*IMPORTANT: otherwise the footer aligns to the :root, which is 100vh*/

    min-height: 100%;    /*if the page is "short", the html takes it up completely anyway*/
}
body {
    margin-bottom: 10rem;    /*this is the height of the footer (if it is not fixed you can find a way using media queries*/
}
footer {
    position: absolute;
    bottom: 0;

    height: 10rem;    /*set whatever you want, but remember to keep it synced with the body*/
}

要记住的重要一点是，margin-bottom 必须设置在 body 上，因为它位于 html 标记内的页脚是其直接父级。

免责声明：

我自己找到了这个解决方案，但我没有检查其他人是否在任何其他问题上找到了它......在这种情况下，请随时在评论中引用它们！

Answer 8

试试这个css到您的页脚

position: fixed; bottom: 0

小提琴：http://jsfiddle.net/A7DUK/

只有页面“短”时才将页脚放在底部

8 个答案: