表单提交在前端日常开发中简单而常用,但我还是总结了一下这个简单的小东西,目的是在开发中对最基础的东西可以做到规范而不假思索。
下图展示的是移动端表单自适应的几种情况:
1、前两张图片对比
当屏幕高度足够容纳表单内容的时候,表单正常显示,当屏幕高度不足时,则显示滚动条。
2、后两张图片对比
提交按钮总是置于屏幕下端距离底部固定距离的位置,无论屏幕大小。
归结一下,其实就是当设备高度足够时,按钮始终置底;当设备高度小于内容高度时,出现滚动条。
以下是我通过纯css方式的实现:
效果预览https://jsfiddle.net/xiaowoniu/4bab4ja2/22/(可通过拖动效果展示窗高度来验证自适应效果)