Footer的两种不同的位置
这两天做母版页查到了两种Footer的经典位置：在文字的最下方和在页面的最下方。
1、在文字的最下方：
新建一个aspx页面：
<head runat="server"> <title></title> <style type="text/css"> body, html { margin: 0; padding: 0; height: 100%; } #content { min-height: 100%; position: relative; } #main { padding: 10px; padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/ } #footer { position: absolute; bottom: 0; padding: 10px 0; background-color: blue; width: 100%; } #footer h1 { margin: 0; padding: 0 10px; } </style> </head> <body> <div id="content"> <div id="main"> <script language="javascript" type="text/javascript"> for (i = 0; i < 1000; i++) { document.write(i + "<br />"); } </script> </div> <div id="footer"> <h1> Footer</h1> </div> </div> </body>效果如图：
2、在页面的最下方：
新建一个aspx页面：
<head> <title></title> <style type="text/css"> body { margin: 0px; padding: 0px; overflow: hidden; padding-top: 22px; padding-bottom: 22px; } #header { background-color: blue; color: white; position: absolute; top: 0px; left: 0px; height: 16px; width: 100%; } #content { width: 100%; height: 100%; overflow:auto; position:absolute; } #footer { background-color: green; color: white; width: 100%; height: 16px; position: absolute; bottom: 0px; } </style> </head> <body> <div id="header"> header</div> <div id="content"> <script language="javascript" type="text/javascript"> for (i = 0; i < 1000; i++) { document.write(i + "<br />"); } </script> </div> <div id="footer"> footer</div> </body>效果如图：