h5页固定在底部的按钮
- 问题
- 单独使用fixed布局，会被键盘顶上去
- 单独使用flex布局，在上划页面会被滑动脱离固定底部
- 方案
-
flex布局+fixed布局解决
如图所示
<div class="wrap">
<div class="content">
</div>
<div class="footer>
</div>
</div>
.wrap{
display:flex;
flex-direction:column;
height:100%;
}
.footer{
height:1rem;
width: 100%;
position: fixed;
bottom:0;
left:0;
}
.content{
overflow-y:auto ;
flex-shrink: 1;
flex-grow: 1;
}
网友评论