我正在开发移动网络应用程序.这是从上到下的主要结构：标题div,菜单div,内容div,页脚div.标题,菜单和页脚是常量,页面使用ajax加载到内容div中.
一些页面有很多内容,他们填写页面,因此需要滚动.一些页面只有一行或两行内容,所以他们留下一大空的部分(不一定是不同的页面 – 一页,例如显示一个订单列表,你可以没有订单,你可以有数百…).
这是我想要实现的：如果页面没有包含内容,页脚将在页面的底部.如果页面已满,需要滚动,页脚将立即在内容之后(所以您向下滚动页面,最后到达页脚).
粘贴的页脚解决方案对我来说不是很好,因为我不希望页脚始终坚持下来,只有当页面不够内容时.
有没有办法实现呢？谢谢.
解决方法
然后你必须使用
javascript – 计算内容的高度 – 从窗口高度减去它,并从该距离设置页脚的页边距：
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方法(但是具有最小高度而不是margin-top)
// 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)也包括边距.
