手机端由于键盘弹出导致的上移问题、高度铺满

120 阅读1分钟

上移问题的根本是视窗高度的改变

此次主要遇到的问题是:父元素的高度不被子元素撑开的问题

主要的情景

在子元素定高,父元素设置100%(跟随祖先元素,这里是跟随视窗大小)-->导致子元素溢出

y轴滚动后才可显示溢出部分,如下图

20230131-140004.png

解决方案:

  • 溢出问题:让元素根据内容撑开,而不是给外部的父元素一个height:100%(从而避免因为两个元素高度不一致的溢出问题)
  • 铺满height的问题:给外部的父元素一个min-height:100%(从而解决子元素的高度小于视窗的问题)

此次纠结的问题:由于需要铺满的背景元素与内容元素是兄弟的关系,所以需要一个父元素将其关联起来。使用absolute使背景元素相对于共同的父元素(即给该父元素设置成定位元素,这里用relative),这样父元素的高度由内容元素撑开后,背景元素由于相对于该父元素,其height的100%就变成了该父元素的高度,也就是被内容元素所撑开。

知识欠缺:绝对元素相对于某定位元素之后,其height的100%就变成了该定位元素的高度