随笔分类

随笔档案

文章分类

如何使页面的footer始终位于底部？

以下的一个页面布局的代码，除了globalContainer和dynamicContent部分以外，其他部分都是固定的尺寸。

其中，globalContainer有个初始值774px,并且根据分辨率和IE各个菜单的显示情况自动调整。dynamicContent会动态计算，以保证footer始终位于底部。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

body

{

padding:0px;

margin:0px;

}

#globalContainer

{

width:100%;

height:774px;

padding:0px;

margin:0px;

}

#mainContent

{

min-width:1280px;

height:100%;

}

#head1

{

width:100%;

height:100px;

background-color:Gray;

}

#head2

{

width:100%;

height:100px;

background-color:Aqua;

}

#footer

{

width:100%;

height:100px;

background-color:Silver;

}

</style>

</head>

<body>

This is head1

</div>

This is head2

</div>

This is dynamic content

</div>

This is footer.

</div>

//Set footer location

$(function () {

setFooterPosition();

});

$(window).resize(function () {

setFooterPosition();

});

function setFooterPosition() {

$(".globalContainer").css("height", document.body.scrollHeight - 5);

var mainAreaHeight = $("#mainContent").height();

var headerHeight = $("#head1").height();

var header2Height = $("#head2").height();

var containerHeight = $("#dynamicContent").height();

var footerHeight = $("#footer").height();

var innerHeight = headerHeight + header2Height + containerHeight + footerHeight;

var outerHeight = headerHeight + header2Height + footerHeight;

if (mainAreaHeight >= innerHeight) {

$("#dynamicContent").height(mainAreaHeight - outerHeight);

}

else {

$("#dynamicContent").height("auto");

}

</script>

</body>

</html>

这个布局能够保证footer始终位于底部，主要处理了以下几种情况：

1。页面内容很短。

2。页面内容很长。

3。页面没有最大化。

4。页面从最大化变为非最大化，

5。页面从非最大化变为最大化

posted on 2012-04-09 15:27 今夜太冷阅读(1085) 评论(0) 编辑收藏举报

搜索

常用链接

积分与排名

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

如何使页面的footer始终位于底部？