使用flex布局，安卓输入框输入键盘抬起，将底部顶起

起始样式：

点击查看代码

.container{display:flex;}
.header {height:50px}
.scrollContent{flex:1;height:0;}
.foot-btn{height:50px}

结果：安卓键盘抬起，将底部顶起
原因：滚动区域flex：1时，也就是flext-grow：1、flex-shirk：1和flex-basic：0%，底部内容会被键盘顶起，是因为键盘抬起时，整个页面的可视高度减小，因为flex-shirk：1，所以滚动区域scrollContent高度跟着缩减，底部没被撑起来，所以被键盘顶起

修改1:
.scrollContent{flex:1;} ，初始化时，获取该区域高度，给scrollContent设置固定高度。
结果：滚动区域内容超过滚动区域时，键盘抬起不会顶起底部，但是内容高度小于滚动区域时，底部还是会被顶起。
原因：flex-basic:0; 即使元素设置了width 或 height 也会被忽略掉，以元素自身内容大小为弹性子元素的伸缩基准值
，以及 flex-shirk：1；

修改2:
.scrollContent{flex-grow: 1;flex-shrink: 0;flex-basis: 0%;} 初始化时不设置高度
结果：滚动区域内容高度大于一半小于整个滚动区域高度，键盘抬起不顶起底部，但是内容高度大概小于等于滚动区域一半时，键盘抬起仍会顶起底部

修改3:
.scrollContent{flex-grow: 1;flex-shrink: 0;flex-basis: auto;} 初始化时不设置高度 （flex-basis: auto;可去掉，默认值就是auto）
结果：滚动区域内容高度大于一半小于整个滚动区域高度，键盘抬起不顶起底部，但是内容高度大概小于等于滚动区域一半时，键盘抬起仍会顶起底部

修改4: .scrollContent{flex-grow: 1;flex-shrink: 0;flex-basis: 0%;} 初始化时设置高度
结果：滚动区域内容高度大于一半小于整个滚动区域高度，键盘抬起不顶起底部，但是内容高度大概小于等于滚动区域一半时，键盘抬起仍会顶起底部
原因：flex-basic：0%：滚动区域高度就是内容高度，即使设置了高度也会被忽略

修改5:.scrollContent{flex-grow: 1;flex-shrink: 0;flex-basis: auto;} 初始化时设置高度
结果： 无论滚动区域内容高度如何，键盘抬起不再顶起底部

结论：flex-basic:0;时，设置高度也是内容高度；同理，flex-basic:auto;未设置高度也是内容高度，所以要flex-basic:auto;且设置高度。

扩展：
(1)滚动区域flex：1时，也就是flext-grow：1、flex-shirk：1和flex-basic:0%
(2)flex-basic:auto； 与flex-basic:0；
flex-basic代表弹性元素的初始大小
auto 是 flex-basic 的默认值，长度等于灵活项目(弹性子元素)的长度。如果该项目未指定长度(未设置width或height属性)，则长度将根据内容决定，也就是说如果有宽高，就是设置的宽高，如果没有设置宽高，就是内容的宽高
flex-basic:0; 即使元素设置了 width 或 height 也会被忽略掉，以元素自身内容大小为弹性子元素的伸缩基准值
flex-basic如果设置了具体的值，就会忽略设置的宽高，使用设置的值
(3) flex默认是0 1 auto

• flex: 0 是 flex: 0 1 0% 的简写
• flex: none 是 flex: 0 0 auto 的简写
• flex: 1 是 flex: 1 1 0% 的简写
• flex: auto 是 flex: 1 1 auto 的简写
• flex: 0% 是 flex: 1 1 0% 的简写

(4) 纵向的flex:1;flex-basic已经是0%;为什么需要设置height:0才能生效？
Flex容器的初始设置是min-height：auto.这意味着,默认情况下,弹性项目不能短于其内容.高度就是内容的高度。当scrollContent的内容撑满了，scrollContent的高度并不是container的高度减header和footer的高度，而是scrollContent的内容高度，需要解决溢出并且让scrollContent中的内容自适应只需要给scrollContent加height:0就解决了
使用height：0就能生效,但是标准方法是：

点击查看代码

.scrollContent {
    flex: 1 0 0;
    min-height: 0; /* new */   
}

参考文章：https://www.jb51.cc/html/672992.html