虚拟键盘将html中的底部元素向上推

Question

我有一个底部表格，该底部表格位于网页底部的底部：30像素，但是当我尝试点击输入框以提供输入时，底部表格会随着键盘弹起而上升。

CSS代码：

.progress-table {
height: 1px; 
width: 100%; 
border:1px;
position:absolute !important;
bottom: 30px;

}

HTML代码

<table class="progress-table">
<tbody>
    <tr>
        <td style="width: 60%;"><hr style="border: 2px solid #ffb414; margin-left:15px; margin-top:0px;" align="left" width="100%" /></td>

        <td style="width:93%"> <div class="hr" style="padding-bottom:19.9px"></div>  </td>

        <td style="width: 50%; align-content:center;">
            <img src="/lib/ZSLogo.png" style="width:25px; height:12px; margin-right:15px;margin-bottom:19.9px" />
        </td>

    </tr>
</tbody>

When the keyboard pops up

您可能会注意到该栏位于文本输入区域上方。

我希望它躺在键盘弹出之前的位置。 先前的图片在这里：Here is the image for the normal view

简而言之，橙色条不应随键盘的外观向上推。