css-移动端解决底部fixed定位，挡住一部分内容

移动端底部内容fixed定位挡住部分内容

在开发移动端页面时，经常出现的一种布局是在浏览器底部固定一个盒子，设置固定定位fixed，但是会出现这个固定定位的盒子压住上文的内容的情况，详细看下图：

蓝色的底部固定栏挡住了部分产品的内容。

这里我的底部固定栏的高度设置为8%，代码如下：

<!-- html部分-->
<div class="main">
    <img src