移动键盘/检查器抛出高度:100%CSS

时间:2016-10-20 17:43:08

标签: reactjs flexbox responsive

我在http://pinkbook.s3-website-us-west-2.amazonaws.com/

部署了一个非常小的页面

我正在使用我的响应式设计,我使用flexbox使用Material-UI中的一些组件,这些组件大部分都设计为display: block

单击电子邮件或密码的输入字段时,在移动设备上会弹出键盘并导致内容和布局失真。 HTML / Body的100%高度似乎不再一致,并且我的一些具有边缘规则的按钮现在从它们的容器中逃逸并且流入HTML / Body中没有覆盖的空白。

请浏览该网址,然后从移动浏览器中查看,或者打开检查器并查看页面底部 - 有明显的白色区域和错误定位的按钮。当输入字段被聚焦并且键盘出现时,如何调整CSS以避免空白和内容错位?

0 个答案:

没有答案