页面不满时将页脚推到底部 [英] Push footer to bottom when page is not full

问题描述

我正在开发一个移动网络应用程序.这是从上到下的主要结构:标题div，菜单div，内容div，页脚div.页眉，菜单和页脚是常量，并且使用ajax将页面加载到内容div中.

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.

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

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.

推荐答案

然后，您必须使用javascript-计算内容的高度-从窗口高度中减去内容，并从中设置页脚的页边距距离:

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:

• jsfiddle
• 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，应在此脚本之前将其包括在内).

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

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

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

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

这是 onResize 方法(但是具有 min-height ，而不是 margin-top )

Here is the onResize method (but with a min-height and not 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)也包含边距.

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.

这篇关于页面不满时将页脚推到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！