方法1:footer高度固定+绝对定位
<style> 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;} </style> <body> <header>header</header> <main>content</main> <footer>footer</footer> </body>