将footer固定在页面底部的实现方法
2019-04-30 20:43:41
467次阅读
0个评论
footer高度固定+绝对定位

HTML结构:

<body>
    <header>header</header>
    <main>main content</main>
    <footer>footer</footer>
</body>

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为固定高度值。
收藏 0 0

登录 后评论。没有帐号? 注册 一个。

admin

官方人员
  • 0 回答
  • 0 粉丝
  • 0 关注