css实现一个盒子永远置于页面的底部
版权声明：本文为博主原创文章，未经博主允许不得转载。
本文要实现的效果为始终让下方的一个盒子位于最底部，如果所示：
html代码为：
<body>
<div class="content">content</div>
<div class="footer">footer</div>
</body>
css实现方法一：使用定位：
body {
margin: 0;
padding: 0;
}
.footer {
width: 100%;
height: 80px;
background: #5b6d81;
line-height: 80px;
text-align: center;
/* 方法一 */
position: fixed;
bottom: 0;
}
css实现方法二：使用100vh
body {
margin: 0;
padding: 0;
}
.footer {
width: 100%;
height: 80px;
background: #5b6d81;
line-height: 80px;
text-align: center;
/* 方法一 */
/* position: fixed;
bottom: 0; */
}
.content {
height: 100vh;
}