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

Push footer to bottom when page is not full

提问by gabriel

I'm developing a mobile web app. This is the main structure from top to bottom: header div, menu div, content div, footer div. The header, menu and footer are constant and pages are loaded into the content div using ajax.

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

Some of the pages have lots of content and they fill out the page so scroll is needed. Some of the pages have only one or two lines of content so they leave a big empty part (Not necessarily different pages - one page for example shows a list of orders, you can have no orders and you can have hundreds...).

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

This is what i want to achieve: If the page is not full with content, the footer will be in the bottom of the page. If the page is full and scroll is needed, the footer will be immediately after the content (so you scroll down the page and in the end you reach the footer).

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

The sticky footer solutions are not good for me because i don't want the footer to stick to the bottom always, only when the page is not full of content.

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

Is there anyway to achieve that? Thanks.

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

回答by Adidi

Then you have to use javascript for that - calculate the height of the content - substract it from the window height and set the margin-top of the footer from that distance:

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

• jsfiddle
• jsfiddle show

• 提琴手
• jsfiddle 表演

HTML

HTML

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

JS(This example uses jQuery, it should be included before this script.)

JS（这个例子使用 jQuery，它应该被包含在这个脚本之前。）

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

You can put an onresize window that call this function on any resize of the window.

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

[edit blag :]

[编辑博客:]

Here is the onResizemethod (but with a min-heightand not a margin-top)

这是onResize方法（但带有 amin-height而不是 a margin-top）

Check the JSFiddle

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

---

---

Borders, padding and margin

边框、填充和边距

If you want to have borders and padding included in the calculation you can use outerHeight()instead of height(). Alternatively outerHeight(true)also includes margins.

如果你想有包含在可以使用计算边框和填充outerHeight()代替height()。或者outerHeight(true)也包括边距。

回答by Drew Dahlman

A CSS Sticky footer should solve your problem.

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

Here's an example

这是一个例子

That is super easy to setup and use. It will force the footer down the page with the content, and if the content isn't big enough to fill the page it will stick to the bottom.

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

回答by Александр Михайлов

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

回答by dragoeco

This solution worked for me. I think this is perfect if you have more than only a #header and #footer. It just push the content down with a padding-bottom if body is smaller than the viewport.

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

回答by Savage

The following solution works for me, based on the answer from Александр Михайлов. It finds the bottom of the footer and determines if it is less than the document height and uses top margin on the footer to make up the shortfall. This solution might give issues if your content is being resized on the go.

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

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