Question

如何使用jQuery将页脚保持在屏幕底部。

我知道它在css中有重复但是如何使用jQuery？

我在其他使用CSS的解决方案中发现了不同大小的屏幕（小屏幕）或不同HTML代码的许多问题。

例如，这个解决方案使用css并不适合我：

How to keep footer at bottom of screen

CSS to make HTML page footer stay at bottom of the page with a minimum height

请注意我有自己的设计代码，新的风格或结构无法帮助我解决问题。

Answer 1

简单易行。

只需将以下代码复制/粘贴到您的页脚之前或您想要拉伸的位置。

<div id="js-heightControl" style="height: 0;">&nbsp;</div>
<script>
    $(function(){
        $('#js-heightControl').css('height', $(window).height() - $('html').height() +'px');
    });
</script>

Answer 2

CSS：

html {
    position: relative;
    min-height: 100%;
}
footer {
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
}

jQuery的：

function footerAlign() {
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);
}


$(document).ready(function(){
  footerAlign();
});

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

DEMO：http://codepen.io/anon/pen/ZQxQoR

如何使用jQuery将页脚保持在屏幕底部

2 个答案: