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

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.

我正在开发一个移动网络应用程序。这是从上到下的主要结构：标题div，菜单div，内容div，页脚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.

反正有没有实现这一目标？谢谢。

4 个解决方案

#1

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 - 计算内容的高度 - 从窗口高度减去它并从该距离设置页脚的margin-top：

jsfiddle
的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 :]

[编辑blag：]

Here is the onResize method (but with a min-height and not a margin-top)

这是onResize方法（但是最小高度而不是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）也包含边距。

#2

A CSS Sticky footer should solve your problem.

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

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.

这非常容易设置和使用。它将使用内容强制页脚向下页面，如果内容不够大，无法填充页面，它将粘在底部。

#3

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

#4

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，我认为这是完美的。如果主体小于视口，它只是用填充底部向下推内容。

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

#1