13

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

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

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

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

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

4

6 回答 6

26

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

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方法（但使用 amin-height而不是 a 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)还包括边距。

于 2013-04-28T07:24:56.780 回答
3

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

这是一个例子

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

于 2013-04-28T07:58:21.877 回答
1 
    function autoHeight() {
        var h = $(document).height() - $('body').height();
        if (h > 0) {
            $('#footer').css({
                marginTop: h
            });
        }
    }
    $(window).on('load', autoHeight);
于 2016-11-19T20:22:29.097 回答
1

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

$(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);
}
于 2019-08-31T13:51:58.950 回答
1

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

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();
});
于 2021-06-03T03:36:02.313 回答
0

这个解决方案对我有用。如果您拥有的不仅仅是#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();   
});
于 2017-12-08T21:53:49.210 回答