带输入框的页面在进行布局的时候需要注意的几个点

带输入框的页面在平时开发的时候经常会碰到，最常见的比如登录，注册等页面。今天就拿一个基本的登录页面来讲下在给这类页面做布局的时候需要注意的几个问题。

1，靠近底部或者固定在底部的元素不要使用 fixed，absolute 等定位方式

如果使用了 fixed ，absolute 等方式将元素固定在底部，在 Android 中，当键盘弹起时，你会发现固定在底部的元素跟着键盘一起被顶上去了，顶上去了不说，还很有可能会出现挡住输入框的情况，

2，当有元素要固定在底部，又有剩余空间需要分配时，应该怎么布局

上面第一条说了，不要使用 fixed，absolute ，那么当出现这种情况时应该怎么布局，首先想到的肯定是 flex，在这里使用 flex 也有一点需要注意，

上图中的红框部分就是需要动态分配高度的剩余空间，在使用 flex 布局的时候，千万不要给红框部分设置 flex:1,如果是给红框部分设置 flex:1，在 Android 中当键盘弹起时，你会发现整个页面都挤在一起了，整个页面布局全部变形（根据手机屏幕高度变形情况有所不同）。

针对这种情况的解决方案就是，不要单独给剩余空间设置 flex:1，正确的做法是将底部固定元素之上的所有元素包在一个 div 中，给这个 div 设置 flex:1，这样既达到了布局目的，也不会出现布局被挤变形的问题。

3,带有 input 的元素不要使用 fixed 定位

这一条看起来跟第一条差不多，其实不然，第一条是针对于页面上部分有 input，底部有吸底元素的情况，而这一条说的是在任何情况下都尽量不要给带有 input 的元素使用 fixed 定位，特别是靠近页面底部的元素。

有过移动端 H5 开发经验的人可能都知道，在 ios 中，fixed 定位会有问题，特别是当带有 input 的元素使用 fixed 时，再特别的就是这个元素还要固定在底部时。

这是 ios 本身的问题，这么多年，ios 系统一直在更新，然而不支持 fixed 的问题还是一直存在，真不知道 ios 的那帮开发人员到底在干啥。

这个问题至今都没有一个算是完美和通用的解决方案，我们能够做的就是在平时的开发中注意，加以规避，如果能够说服产品和设计师让他们针对这个问题修改设计那就再好不过了，皆大欢喜。