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

【问题标题】：How to keep footer at bottom of screen using jQuery如何使用jQuery将页脚保持在屏幕底部
【发布时间】：2016-07-23 15:59:12
【问题描述】：

如何使用 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

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

【问题讨论】：

为什么要在 jQuery 中完成，而应该在 CSS 中完成？ position: fixed; bottom: 0; 就是你所需要的。
@RoryMcCrossan 我有自己的设计，定位不是一个好的解决方案。
那么你应该发布一个关于你的具体问题的问题，因为使用 JavaScript 作为 UI 的拐杖是一个非常糟糕的主意。

标签： jquery html css

【解决方案1】：

简单易行。

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

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

【讨论】：

【解决方案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();
});

演示：http://codepen.io/anon/pen/ZQxQoR

【讨论】：

问题清楚地说明了 jQuery 解决方案的需要。 如何使用 jQuery 将页脚保持在屏幕底部
我已经编辑了我的答案。请检查并让我知道这是否有效。
不需要写太多代码，答案很简单。
是的，我找到了我的问题的答案。
谢谢！但是我的页脚有点高如何调整到您想要的高度？