页面未满时将页脚推到底部

Question

我正在开发一个移动网络应用程序。这是从上到下的主要结构：header div、menu div、content div、footer div。页眉、菜单和页脚是不变的，页面使用 ajax 加载到内容 div 中。

有些页面有很多内容，它们会填满整个页面，所以需要滚动。有些页面只有一两行内容，所以它们留下了很大的空白部分（不一定是不同的页面 - 例如一页显示订单列表，您可以没有订单，也可以有数百个......）。

这就是我想要实现的：如果页面内容不完整，页脚将位于页面底部。如果页面已满且需要滚动，页脚将紧跟在内容之后（因此您向下滚动页面并最终到达页脚）。

粘性页脚解决方案对我不好，因为我不希望页脚总是粘在底部，只有当页面内容不完整时。

有没有办法做到这一点？谢谢。

Answer 1

然后您必须为此使用 javascript - 计算内容的高度 - 从窗口高度中减去它并从该距离设置页脚的边距顶部：

• jsfiddle
• jsfiddle show

HTML

<div id="header" class="header">Header</div>
<div id="content" class="content">Content</div>
<div id="footer" class="footer">Footer</div>

JS（本例使用 jQuery，应在此脚本之前包含。）

$('#footer').css('margin-top',
  $(document).height() 
  - ( $('#header').height() + $('#content').height() ) 
  - $('#footer').height()
);

您可以在任何调整大小的窗口上放置一个调用此函数的 onresize 窗口。

[编辑博客：]

这是 onResize 方法（但使用 min-height 而不是 margin-top）

Check the JSFiddle

 // function to set the height on fly
 function autoHeight() {
   $('#content').css('min-height', 0);
   $('#content').css('min-height', (
     $(document).height() 
     - $('#header').height() 
     - $('#footer').height()
   ));
 }

 // onDocumentReady function bind
 $(document).ready(function() {
   autoHeight();
 });

 // onResize bind of the function
 $(window).resize(function() {
   autoHeight();
 });

---

边框、内边距和边距

如果您想在计算中包含边框和填充，您可以使用outerHeight() 而不是height()。或者outerHeight(true) 也包括边距。

Answer 2

CSS Sticky 页脚应该可以解决您的问题。

Here's an example

这是超级容易设置和使用。它会强制页脚在页面下方显示内容，如果内容不足以填满页面，它将粘在底部。

Answer 3

    function autoHeight() {
        var h = $(document).height() - $('body').height();
        if (h > 0) {
            $('#footer').css({
                marginTop: h
            });
        }
    }
    $(window).on('load', autoHeight);

Answer 4

以下解决方案适用于我，基于 Александр Михайлов 的回答。它找到页脚的底部并确定它是否小于文档高度，并使用页脚的上边距来弥补不足。如果您在旅途中调整内容的大小，此解决方案可能会出现问题。

$(function () {
    updateFooterPosition();
});

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

function updateFooterPosition() {
    var bottomOfFooter = $('footer').offset().top + $('footer').outerHeight(true);
    var heightShortage = $(document).height() - bottomOfFooter;
    if (heightShortage < 0) heightShortage = 0;
    $('footer').css('margin-top', heightShortage);
}

Answer 5

这是我在项目中找到的解决方案

function autoHeight() {

    if ( document.body.clientHeight < window.innerHeight ) {
        document.querySelector('#footer').style.position = 'absolute';
        document.querySelector('#footer').style.bottom = '0';
    }
}

document.addEventListener("DOMContentLoaded", function() {
  autoHeight();
});

Answer 6

这个解决方案对我有用。如果您拥有的不仅仅是#header 和#footer，我认为这是完美的。如果 body 小于视口，它只会用 padding-bottom 将内容向下推。

function autoHeight() {
    var bodyHeight = $("body").height();
    var vwptHeight = $(window).height();
    var gap = vwptHeight - bodyHeight;
    if (vwptHeight > bodyHeight) {
        $("#content").css( "padding-bottom" , gap );
    } else {
        $("#content").css( "padding-bottom" , "0" );
    }
}
$(document).ready(function() {
    autoHeight();
});
$(window).resize(function() {
    autoHeight();   
});