安卓系统下软键盘导致的一个前端样式问题

曾经在做项目时遇到了如下的一个需求：在一个话题栏的功能模块中，要求话题展示页面和提问页面都与屏幕等高，在话题展示页面中有一个用于点击弹出提问页面的按钮置于页面底部，点击该按钮会使提问页面由下往上弹出。这个需求要实现其实不难，我一开始的实现方式是让页面的body元素和html元素的高度置为与设备高度相同，接着通过应用流式布局让页面的元素能适应设备高度。接着将提问页面和话题展示页面应用定位样式，然后通过z-index属性使得提问页面能够叠在话题展示页面上即可。一开始测试的时候在IOS和PC端上都没有什么问题，不过到了安卓系统的移动端上测试时，就出现了如下问题：
在安卓系统的手机上，点击input或者textarea元素调起软键盘以后，发现整个页面像是被压缩了一样，页面上的输入框、按钮等都变小了一号。我查了一下资料，发现在安卓系统上，调起软键盘这一操作可能导致页面触发resize事件，于是设备上页面的可视高度就变小了，而如前所述，我在写前端样式时采取了流式布局，同时在提问页面中的许多input元素也应用了较复杂的绝对定位样式，所以导致这些元素在重新计算高度时就像是被压缩了一样。
为了解决这一问题我尝试着重构了一下页面结构以及css的写法，重构以后的页面不再使用任何绝对定位，而是将话题展示页面和提问页面都以原始的块级元素形式嵌套在一个块级元素中，并让父级块元素应用overflow：hidden的样式隐藏提问页面。同时，在初始加载页面的时候使父级块元素的高度等于设备高度。接着在点击提问按钮的时候，隐藏话题展示页面并通过动态添加动画样式实现由下往上弹出的效果。在这种情况下，body元素和html元素都没有被赋予高度样式，所以即使页面触发了resize事件，父级块元素的高度不会由于resize而变小，因此其子元素的高度也不会被压缩。经过进一步测试确定页面的呈现效果与在IOS系统上一致，在调起软键盘后虽然页面的可视高度被压缩了，但是页面正常地出现了滚动条，元素的样式都没有变化。