注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

大耳花蜗牛

 
 
 

日志

 
 
关于我

爱拍照的月半子。个人摄影公众号'JCK设影室' (ID: axdesign)

网易考拉推荐

关于如何将footer固定在页面底部(未完待续)  

2014-03-30 23:47:18|  分类: 前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天起在博客新增"Front End"专栏,不过很惭愧,目前还只是菜鸟水平,在业余时间学习一点前端知识。由于还没有新的"场地",暂且先把学习中遇到的问题放在这里,留作思考和纪念!

关于footer如何固定在底部的问题,在网上查资料看到有很多方式可以实现,可以单纯通过div+css的方式实现,也可以用JS实现。由于还没接触JS,只好通过第一种方式实现。不过在代码实现方面感觉网上提供的方式普遍较复杂不易理解(需设置content和footer的margin,个人觉得有点罗嗦)。自己捣鼓半天貌似发现一种更简便的方式去固定footer,但是不同浏览器和平台的兼容性没有测试不敢保证效果一致,在这里贴上自己试验的代码,望高手指教!

网上教程的方法:

HTML代码

  1. <body>  
  2.   <div class="wrapper">  
  3.   网页主体  
  4.      <!-- push 是用来给footer占位的-->  
  5.      <div class="push">  
  6.      </div>  
  7. </div>  
  8. <div class="footer">  
  9. 底部内容,比如版权声明  
  10. </div>  
  11. </body>  

CSS代码

  1. html, body {  
  2.     height100%;  
  3. }  
  4. .wrapper {  
  5.     min-height100%;  
  6.     heightauto !important;  
  7.     height100%;  
  8.     margin0 auto -155px/* 这个 -155px 要跟 .footer 的高度一样 */  
  9. }  
  10. .footer, .push {  
  11.     height155px/* .push 要跟 .footer 的高度一样  */  
  12. }  

感觉这里的margin设置有点奇怪,有点正负相抵消的意思(具体原理待进一步研究),不过总之不太习惯这种思路......


我的方法:

HTML代码

<body>

<div id="container">

<div id="header"></div>

<div id="elixirs"><!--右边栏--></div>

<div id="leftcolumn"><!--左边栏--></div>

<div id="footer"></div>

</div>

</body>

CSS代码

关于如何将footer固定在页面底部(未完待续) - 大耳花蜗牛 -
 
 
思路:先把整个页面的高度设为100%,然后让container的min-height为100%(内容多过浏览器高度的时候可以自动扩展)。重点是要把footer的位置属性设为relative,这样可以方便footer的相对下移。这样就可以只通过设置footer的bottom属性即可解决问题。如果不想footer死死地贴在页面最下面,可以为其添加padding属性。至此问题已经解决,不过现在还有一个问题就是不论container和footer的位置属性设为relative还是absolute都不会影响到最终结果关于如何将footer固定在页面底部(未完待续) - 大耳花蜗牛 - 这暂且当作留下的一个作业吧,希望高手可以指点迷津!


最终效果如下:
关于如何将footer固定在页面底部(未完待续) - 大耳花蜗牛 -
 

--------------------------------------------------------------------------------笔记分割线-------------------------------------------------------------------------------
1.footer要添加clear:right属性
2.#container设成relative,#footer设成absolute.
  评论这张
 
阅读(488)| 评论(10)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017