在写html页面布局的时候经常会遇到这样的情况:当页面内容较少的时候footer下面会有留白这样会很不好看,直接给footer,fixed定位的话当页面内容多的时候,footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。
方法一:
<body>
<div class="page">
<header> 头部 </header> <div class="content"> <p class="内容区"></p> </div> <footer> 底部 </footer></div></body>
*{
padding:0;
margin:0
}
html,body{
height: 100%;
}
.page{
box-sizing: border-box;
min-height: 100%;
position: relative;
padding-bottom:100px;
}
header{
height: 60px;
background: #0d6aad;
}
.content{
background: #00c7a6;
}
footer{
width: 100%;
height: 100px;
background: #1ab7ea;
position: absolute;
bottom:0;
left: 0;
}
方法二:
其实是对方法一做一些改造,html结构和方法一中的一样。
*{
padding:0;
margin:0
}
html,body{
height: 100%;
}
.page{
min-height: 100%;
position: relative;
}
header{
height: 60px;
background: #0d6aad;
}
.content{
background: #00c7a6;
padding-bottom:100px;
}
footer{
width: 100%;
height: 100px;
background: #1ab7ea;
opacity: 0.6;
position: absolute;
bottom:0;
left: 0;
}
方法三:使用flexbox布局
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.page{
display: flex;
flex-direction: column;
height: 100%;
}
header{
background: #999;
flex: 0 0 auto;
}
.content{
background: orange;
flex: 1 0 auto;
}
footer{
background: #333;
flex: 0 0 auto;
}
方法四:flexbox布局的另一种实现
.content设置为100%,header便会自动吸顶,footer变会自动吸底
.page{
display: flex;
flex-direction: column;
}
header{
background: #999;
height: 100px;
}
.content{
background: orange;
height: 100%;
}
footer{
background: #333;
height: 100px;
}