方法一:footer 高度固定+絕對定位
<html>
<head>
<style type="text/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;}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main">main content</div>
<div class="footer">footer</div>
</body>
</html>
效果：
還有2中方式，這個是我常用的一種。
第二種是：footer高度固定+margin負值。樣式和第一張類似，就是 footer{ margin-top: -100px}
第三中就是footer高度任意，+js,
就是判斷當前頁面內容是否大於可視窗口高度，
轉載於：https://blog.csdn.net/u012258564/article/details/72771188