方法一: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