保持页脚始终在最底部

最新推荐文章于 2021-06-03 09:06:20 发布

aems6644

最新推荐文章于 2021-06-03 09:06:20 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/xzhang/p/3391084.html

版权

嗯，从这篇博文开始，用html写博文，好大挑战喔~

核心代码

 1 <head>
 2     <meta charset="utf-8" />
 3     <title>MA MA MI YA</title>
 4     <style>
 5         *{margin:0;padding:0;}
 6         html{height:100%;}
 7         body{min-height:100%;_height:100%;position:relative;}
 8         #content{
 9             padding-bottom: 160px;
10         }
11         #footer{
12             position:absolute;
13             bottom:0;
14             background:red;
15             width:100%;
16             height:160px;
17         }
18     </style>
19 </head>
20 <div id=content>
21     <p>start</p>
22     <p>123456789</p>
23     <p>123456789</p>
24     <p>123456789</p>
25     <p>123456789</p>
26     <p>123456789</p>
27     <p>--end--</p>
28 </div>
29 <div id=footer> </div>

这样，页脚就始终在浏览器底部了！可以增加<p>来测试内容高度高于浏览器高度时的情况。

支持情况：（经测试）

FF3.6 29.0

Chrome32

IE6 - 这奇葩，初次载入不正常，刷新几次后正常，某时刷新又不正常！

IE11

转载于:https://www.cnblogs.com/xzhang/p/3391084.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aems6644

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
保持页脚始终在最底部

嗯，从这篇博文开始，用html写博文，好大挑战喔~核心代码 1 <head> 2 <meta charset="utf-8" /> 3 <title>MA MA MI YA</title> 4 <style> 5 *{margin:0;padding:0;}...
复制链接

扫一扫