CSS如何防止键盘向上移动内容？
jstraugh43
我使用 Ionic v5 创建了一个简单的“注册”页面，并且对 CSS 和样式一般来说非常陌生。我无法找到一种方法来阻止键盘向上移动我的内容（见图）
我的 CSS：
.bottom-grid {
position: absolute;
left: 0;
right: 0;
width: 85%;
bottom: 10px;
}
.form-grid {
position: absolute;
left: 0;
right: 0;
width: 85%;
}
通过在这里搜索一些帖子，我尝试将位置更改为固定，并添加：
ion-grid {
min-height: 100%;
}
没有太多的运气。如何将此底部网格保留在页面底部？感谢您的任何帮助！
卡兰
我的建议是使用 ion-footer。
<ion-header>
<ion-back-button>
Register
...
</ion-header>
<ion-content [fullscreen]=true class='myMaxHeightClass'>
...enter form inputs here
</ion-content>
<ion-footer>
<p>Already have an account?</p>
<ion-button>Login</ion-button>
</ion-footer>
在 Css 文件上（以防 fullscreen=true 不起作用）：
.myMaxHeightClass {
height: calc(100vh-150px)
}
150px 是页脚的高度。
这应该使内容全屏显示，并且您的页脚将在底部保持粘性。
避免使用绝对定位的页脚按钮，因为根据我的经验会导致大混乱。
让我知道这是否适合您，如果不适合，我将尝试提出不同的方法
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Android Studio Kotlin：提取为常量
- 2
IE 11中的FormData未定义
- 3
计算数据帧R中的字符串频率
- 4
如何在R中转置数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
Excel 2016图表将增长与4个参数进行比较
- 7
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 8
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 9
OpenCv：改变 putText() 的位置
- 10
ActiveModelSerializer仅显示关联的ID
- 11
算术中的c ++常量类型转换
- 12
如何开始为Ubuntu开发
- 13
将加号/减号添加到jQuery菜单
- 14
去噪自动编码器和常规自动编码器有什么区别？
- 15
获取并汇总所有关联的数据
- 16
OpenGL纹理格式的颜色错误
- 17
在 React Native Expo 中使用 react-redux 更改另一个键的值
- 18
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 19
TreeMap中的自定义排序
- 20
Redux动作正常，但减速器无效
- 21
如何对treeView的子节点进行排序
我来说两句