我们在布局的时候有这样一种情况,就是当页面高度没有超过屏幕高度的时候,footer 要固定到底部,而当页面超出满屏的高度的时候,footer 要随着高度走。下面我们就通过 CSS 实现这一效果:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>footer 始终居于底部</title> <style type="text/css"> * { margin:0; padding:0; } body { font:14px/1.8 arial; } html, body, .wrap { height:100%; } .wrap { height:auto; min-height:100%; _height:100%; background:#CCC; color:#fff; font-size:18px; text-align:center; } .main { padding-bottom:80px; } .footer { position:relative; height:80px; line-height: 80px; margin-top:-80px; background:#333; color:#fff; font-size:16px; text-align:center; } </style> </head> <body> <div class="wrap"> <div class="main"> <h1>七七事变祭</h1> <p>中华民族创辉煌,</p> <p>倭寇菲佣心中慌。</p> <p>为虎作伥傍老美,</p> <p>东海南海滋事狂。</p> <br /> <p>历史潮流不可挡,</p> <p>中华儿女当自强。</p> <p>警钟长鸣记国耻,</p> <p>发展经济强国防。</p> <br /> <p>七七事变 77 周年,勿忘国耻,振兴中华!!!</p> <br /> </div> </div> <div class="footer"> <h1>页面高度不满,底部固定</h1> </div> </body> </html>
上面的代码实现了当内容不满一屏时,底部内容始终位于显示屏的底部;当内容超过一屏时,则位于内容底部。
你可能对这些文章感兴趣:
- xiu主题添加博主评论回复管理员标识
- WordPress主题制作必备知识
- 没有任何前兆,我的文章被万网给和谐了。
- 298元的独享虚拟主机,无限流量,WordPress建站首选!
- xiu主题启用七牛cdn缓存后无法评论解决办法
- 用唯一的颜色,风雨飘摇里度过
- 解决Warning in ./libraries/config/FormDisplay.php#661 "continue" targeting switch is equivalent to "break".
- 【WordPress建站基础】网站布局经典图文教程(2)
- WordPress加速:只显示上传到本文章中的图片
- WordPress4.8来了,新功能很不错哦
- 【WordPress建站基础】网站布局经典图文教程(6)
- Win7下重新安装火狐浏览器无法启动解决办法(亲测可行)
- 万网主机启用smtp发送邮件
- WordPress免插件集成支付宝微信打赏功能(适合所有主题)
如有疑问,请前往问答中心反馈!
反馈