admin管理员组文章数量:1588184
1. 按钮始终固定在底部
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡在表单上,影响美观。这个可以采用flex布局完美解决。
HTML代码
<div >
<div >
<form> 这里面是input输入框等。。。。</form>
</div>
<div >
<button type="button" >提交</button>
</div>
</div>
css代码
html,body{padding: 0;margin: 0;height:100%}
.mui-content{height:100%;display: flex;display:-ms-flex;display:-webkit-flex; flex-direction: column;}
.container-box{flex:1;-ms-flex:1;-webkit-flex:1}
.operate {
position: relative;
margin:1rem 1rem 3rem;
}
.operate .btn-submit {
width: 100%;
border-radius: .2rem;
height: 2rem;
color: #fff;
font-size: .8rem;
line-height: 1;
padding: 0;
letter-spacing: 1px;
border: 0;
background-color: #00aaee;
}
说明:给html,body,还有body内的容器div设置高度100%,撑满屏幕。容器div设置display:flex显示,并设置flex的方向为column,设置容器div里面表单部分为flex:1,然后下面的按钮控件就相对定位好就行,这样表单部分的高度就等于页面高度减去按钮部分的高度。在安卓手机上,键盘弹出时,按钮不会遮挡到上面的表单部分。
另外,如果页面高度有可能超过100%,那就不要设置高度 height:100%,而是设置min-height:100%,这样一来,在页面高度不超过100%的时候,按钮会固定在最下面,在页面超过100%的时候,按钮会在页面内容最后面,而不是固定在最下面。
2. sqlite 插入替换
INSERT OR REPLACE INTO 更新数据时,会更新整条数据,没有赋值的列会被默认值或空值覆盖掉。
本文标签:
版权声明:本文标题:前端遇到的一些问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728025050a1142593.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论