用了css的黏性布局贴底点开键盘会被切掉一部分

Question

没点开键盘的时候还好

点开键盘之后就被切了一部分，直接切到input高度位置。

想知道有没有什么解决方案。

Answer 1

使用 CSS 的黏性布局时遇到了贴底点开键盘会被切掉一部分的问题，那么可能是因为在使用黏性布局时未考虑到打开键盘会改变视口（viewport）的高度。

对于这种情况，可以在 CSS 中使用 calc() 函数来动态计算黏性布局的高度。例如，在设置黏性布局的顶部偏移量时，可以使用以下代码：

.sticky {
  top: calc(100vh - var(--footer-height));
}

这样，当键盘打开时，视口的高度会发生变化，calc() 函数就会自动计算出新的顶部偏移量，使黏性布局保持在视口底部。

注意，在上述代码中，使用了 CSS 变量 --footer-height 来存储黏性布局的高度。可以在使用黏性布局的元素上定义该变量，然后在 CSS 中使用即可。例如：

.sticky {
  --footer-height: 50px;
  top: calc(100vh - var(--footer-height));
}