以下的一个页面布局的代码，除了globalContainer和dynamicContent部分以外，其他部分都是固定的尺寸。
其中，globalContainer有个初始值774px,并且根据分辨率和IE各个菜单的显示情况自动调整。dynamicContent会动态计算，以保证footer始终位于底部。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title>
<style type="text/css"> 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> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js"></script> </head> <body> <div id="globalContainer" class="globalContainer"> <div id="mainContent"> <div id="head1"> This is head1 </div> <div id="head2"> This is head2 </div> <div id="dynamicContent"> This is dynamic content </div> <div id="footer"> This is footer. </div> </div> </div> <script type="text/javascript"> //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。页面从非最大化变为最大化
