好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

将footer固定在页面底部的实现方法_html/css_WEB-ITnose

方法一:footer高度固定+绝对定位

HTML结构:

      header      main content      footer   

CSS设置:

html{height:100%;}body{min-height:100%;margin:0;padding:0;position:relative;}header{background-color: #ffe4c4;}main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;} 

首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;

其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;

最后,设置footer绝对定位,并 设置height为固定高度值。

方法二:footer高度固定+margin负值

HTML结构:

     

header main content

查看更多关于将footer固定在页面底部的实现方法_html/css_WEB-ITnose的详细内容...

  阅读:26次