在一个风和日丽的晚上，我正举着咖啡杯品尝着加班的苦时，业务方突然给我提出了这样一个bug，正在做的商城小程序端购物车页面有这样一个显示问题。 ！！！再ios中下方购物车汇总金额部分 消失了 神奇的看不见它 本着见过大风大浪，遇事先不慌的原则，眯着眼很有自（疑）信（惑）地看了一眼效果，真的消失不见了！！！ 最后经过长达五分钟中万能渡先生 定位到了问题应该出在 fixed 绝对定位上，于是尝试了网上的n种方法之后，特在此记录下来。
假设我们页面的 HTML 结构是这样：
<div class="wrapper">
<div class="content"><!-- 页面主体内容区域 --></div>
<div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
</div>
方法1：absolute
通过绝对定位处理应该是常见的方案，只要使得页脚一直定位在主容器预留占位位置。
html, body {
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
}
这个方案需指定 html、body 100% 的高度，且 content 的 padding-bottom 需要与 footer 的 height 一致。
方法2：增加同级占位符
<div>
<div style="height:60px;">占位符(ps:假定footer高60px)</div>
<section class="footer">
<input type="button" value="确认添加"/>
</section>
</div>
方法3：通过计算函数 calc 计算（视窗高度 - 页脚高度）赋予内容区最小高度，不需要任何额外样式处理，代码量最少、最简单。
.content {
min-height: calc(100vh - 50px);
}
.footer {
height: 50px;
}
如果不需考虑 calc() 以及 vh 单位的兼容情况，这是个很理想的实现方案。 同样的问题是 footer 的高度值需要与 content 其中的计算值一致。
方法4：Flexbox
Flexbox 是非常适合实现这种效果的，使用 Flexbox 实现不仅不需要任何额外的元素，而且允许页脚的高度是可变的。
虽然大多数 Flexbox 布局常用于水平方向布局，但别忘了实际上它也可用于垂直布局，所以你需要做的是将垂直部分包装在一个 Flex 容器中，并选择要扩展的部分，他们将自动占用其容器中的所有可用空间。
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
需要注意的是想要兼容各种系统设备，需要兼顾 flex 的兼容写法。
注：以上内容转载自下面链接，内容只用于浏览记录，后期遇到这个问题有个快速解决方式，如有侵犯，联系本人删除。
