stickyFooter 绝对底部布局

一种网页效果

• 如果页面内容不足够长时，页脚固定在浏览器窗口的底部
• 如果内容足够长时，页脚固定在页面的最底部
• 总而言之，就是页脚一直处于最底

https://jelly.jd.com/article/6006b1045b6c6a01506c87e3
https://css-tricks.com/couple-takes-sticky-footer/

<div class="wrapper">
    <div class="content"><!-- 页面主体内容区域 --></div>
    <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
</div>

flex实现

需要设置 html，body的高度

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

calc实现

.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}