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

Question

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

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

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

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

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

Answer 1

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

• 提琴手
• jsfiddle 表演

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 ）

检查 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 页脚应该可以解决您的问题。

这是一个例子

这非常容易设置和使用。 它会强制页脚在包含内容的页面上向下移动，如果内容不足以填满页面，它会粘在底部。

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

这个解决方案对我有用。 我认为这是完美的，如果你有不止一个#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();   
});

Answer 6

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

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();
});