方法一：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;text-align: center;background-color: #ffc0cb;}首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；
其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；
最后，设置footer绝对定位，并设置height为固定高度值。
方法二：footer高度固定+margin负值
HTML结构：
最低0.47元/天 解锁文章
2508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
