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

Question

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

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

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

粘性页脚解决方案对我不利,因为我不希望页脚总是粘在底部,只有当页面没有内容时.

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

Answer 1

然后你必须使用javascript - 计算内容的高度 - 从窗口高度减去它并从该距离设置页脚的margin-top:

• 的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,它应该包含在这个脚本之前.)

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

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

[编辑blag:]

这是onResize方法(但有一个min-height而不是一个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)也包括边距.