CSS实现Footer置底
刁文光
页面置底就是让网页的footer部分始终在浏览器窗口的底部。
实现方法：
方法1：给html高度设置100%，body设置min-height:100%,把底部绝对定位到body的底部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
position: relative;
min-height: 100%;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="footer"></div>
</body>
</html>方法2：将内容部分的底部外边距设置为负数，把内容的最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持再窗口底部，当高度超出则随之推出的效果。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height: 100%;
margin: 0;
}
.wrapper{
min-height: 100%;
/*等于footer的高度*/
margin-bottom: -50px;
}
.footer,.push{
height: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
</html>需要注意的时.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不是太友好。
方法3：将页脚的顶部外边距设为负数
在容器上使用负margin-top,给内容外增加父元素，并让内容部分的底部内边距与页脚高度的值相等。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height: 100%;
margin: 0;
}
.content{
min-height: 100%;
}
.content-inside{
padding: 20px;
padding-bottom: 50px;
}
.footer{
height: 50px;
margin-top: -50px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<div class="footer"></div>
</body>
</html>这个方法需要多添加一个包裹层
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
margin: 0;
}
.content{
min-height: calc(100vh - 50px);
}
.footer{
height: 50px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="content">
content
</div>
<div class="footer"></div>
</body>
</html>方法5：使用flexbox弹性盒布局
以上三种方法的footer高度都说固定的，通常来说不利于网页布局：内容会改变，它们都说弹性的，一旦内容超出固定高度就会破坏布局，所以给footer使用flexbox,让它的高度可以变大变小。
以上方法，第一种方法是自己总结的，其他方法是参考文章《css 5种方式实现Footer置底》
类似资料：