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

没点开键盘的时候还好

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

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

使用 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));
}

HTML 代码：

<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
    </div>
</div>
<div id="footer">
</div>

footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。

CSS代码:

下面是主要的CSS代码，让你的底部可以位于窗口的最下面:

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;}

说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。。

对#main部份进行著名的Clearfix Hack:

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}