【要求】
上中下布局：当页面高度不满一屏的时候，footer固定在页面的底部；当页面高度满一屏的时候，footer随着页面内容滚动。
【code实现-普通布局方式】
// html结构
<body>
<div class='header'></div>
<div class='content'></div>
<div class='footer></div>
</body>
// css实现
/*
* 关键点在于：中间内容的padding-bottom值与footer的height值和margin-top的值一致
*/
body {
height: 100%;
}
.header {
height: 60px;
}
.content {
min-height: calc(100% - 60px);
box-sizing: border-box;
padding-bottom: 60px;
}
.footer {
height: 60px;
margin-top: -60px;
}
【code实现-flex布局】
// html布局
<body>
<div class='header'></div>
<div class='content'></div>
<div class='footer></div>
</body>
// css实现
/*
* 利用flex:1;占据页面剩余高度值的特性实现
*/
body {
display: flex;
flex-direction: column;
height: 100%;
}
.head {
width: 100vw;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #aff;
}
.content {
flex: 1;
text-align: center;
background-color: #ffa;
}
.footer {
width: 100vw;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #faa;
}