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

Posted 2023-02-22

【中文标题】页面未满时将页脚推到底部

【英文标题】：Push footer to bottom when page is not full

【发布时间】：2013-04-22 01:09:08

【问题描述】：

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

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

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

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

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

【问题讨论】：

使用 jQuery 还是原生 javascript？

【参考方案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) 也包括边距。

【讨论】：

谢谢，非常好，但在添加窗口调整大小事件时不起作用。您可以在 jsfiddle.net/jnLp5x7u

【参考方案2】：

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

Here's an example

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

【讨论】：

粘性页脚对我不利，因为在我的内容比页面长的情况下，我希望页脚只有在一直向下滚动后才会出现。 jquery 解决方案看起来不错，我正在尝试。谢谢大家:)

感谢您，flexbox 选项完美运行。

【参考方案3】：

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

【讨论】：

而不仅仅是发布代码，请描述您为什么认为这是一个解决方案，以便其他人对您的答案有一些背景和进一步的了解。请在此处查看 *** 上的 How to Write a Good Answer。

好的，我下次试试:)

你应该试试这一次，editing 你的答案。

【参考方案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);

【参考方案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();
);

【参考方案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();   
);