如果文档高度小于窗口高度，则将页脚强制到页面底部

我正在以ipad的肖像模式修复我的网站显示。 问题是页面长度不像ipad的纵向显示那么长。 这是我正在谈论的图片：

我创建了一个jQuery函数，我认为当文档高度没有窗口高度那么大时会检测到，然后我可以将页脚的位置设置为固定。 这是我的代码：

if ($(document).height() < $(window).height()) { $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;'); } 

目前的CSS：

 #footer-wrapper { padding: 20px 0px 23px; background-color: #E3E9DC; border-bottom: 3px solid #007897; border-top: 3px solid #007897; color: #585858; position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; } @media screen and (max-width: 1024px) { #footer-wrapper { /*padding: 20px 0px 23px;*/ background-color: #E3E9DC; border-bottom: 3px solid #007897; border-top: 3px solid #007897; color: #585858; position: relative; margin-bottom: -65px!important; width: 100%; text-align: center; } } 

我认为这可行，但由于某种原因，文档说它的高度比窗口视口大，所以不执行if语句。 有谁知道更可靠的方法来实现这一目标？

Answer 1

只需将javascript更改为：

 if ($(document.body).height() < $(window).height()) { $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;'); } 

Answer 2

不幸的是，身高可以设定为100％。 这是仅处理页脚的解决方案

 $(window).on('load resize scroll', function() { var f = $('#footer-wrapper'); f.css({position:'static'}); if (f.offset().top + f.height() < $(window).height()) { f.css({position:'fixed', bottom:'0', width:'100%'}); } });