常用样式——移动端表单提交中的屏幕自适应

  表单提交在前端日常开发中简单而常用，但我还是总结了一下这个简单的小东西，目的是在开发中对最基础的东西可以做到规范而不假思索。
下图展示的是移动端表单自适应的几种情况:

移动端表单屏幕自适应.png

1、前两张图片对比

当屏幕高度足够容纳表单内容的时候，表单正常显示，当屏幕高度不足时，则显示滚动条。

2、后两张图片对比

提交按钮总是置于屏幕下端距离底部固定距离的位置，无论屏幕大小。

  归结一下，其实就是当设备高度足够时，按钮始终置底；当设备高度小于内容高度时，出现滚动条。

以下是我通过纯css方式的实现：
效果预览https://jsfiddle.net/xiaowoniu/4bab4ja2/22/（可通过拖动效果展示窗高度来验证自适应效果）