无法在移动设备上修复元素

Question

我开发了一个网络应用程序。不幸的是，我在定位方面遇到了一些问题。

从下图中可以看出，我的三星s4在谷歌浏览器上的移动键盘导致我的元素超出我的标题。

但是，当我在iPhone 4上使用safari进行测试时，这种情况不会发生。不幸的是，当我在带有谷歌浏览器的iPhone 4上测试它时，同样的问题仍然存在。

这就是我登录页面的html的样子

<div id="loginpage">

    <table id="loginpage1" width="100%">
    <tr>
        <td>
            <h2>Login</h2>
            <br />
        </td>
    </tr>

    <tr>

       <td>
          <b>  Username : </b> <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
            <br />
            <br />
        </td>
    </tr>

    <tr>

        <td>
           <b> Password : </b> <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ></asp:TextBox>
            <br />
            <br />
        </td>
    </tr>

</table>
<table id="loginpage2" width="50%" align="center">
    <tr>
        <td align="right">
            <b>Account Type :</b> 
            </td>
        <td>
            <asp:RadioButton ID="rbMember" runat="server" GroupName="rbGroup1" Text="Member" />
            </td>
        <td>
            <asp:RadioButton ID="rbPolice" runat="server" GroupName="rbGroup1" Text="Officer" />
            </td>
        <td>    
        <asp:RadioButton ID="rbAdmin" runat="server" GroupName="rbGroup1" Text="Admin" />
           </td>
        <td>
             <asp:RadioButton ID="rbSuperior" runat="server" GroupName="rbGroup1" Text="Superior" />
            </td>
        <td>
            <asp:RadioButton ID="rbPoliceStaff" runat="server" GroupName="rbGroup1" Text="PoliceStaff" />

        </td>
    </tr>

     <tr>
        <td colspan="6" >
            <b><asp:Label ID="lblMessage" runat="server" ></asp:Label></b>
            <br />
            <br />
        </td>
    </tr>

    <tr>
        <td colspan="6">
            <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
            <br />
            <br />
        </td>
    </tr>

    <tr>
        <td colspan="6">
            <asp:LinkButton ID="lbtnMemberRegister"  runat="server" OnClick="lbtnMemberRegister_Click">Register</asp:LinkButton>
        </td>
    </tr>
</table>
            </div>

这是我的CSS

#loginpage
{
    position:absolute;
    margin-top:-15%;
    overflow:hidden;            
}

我也使用overflow:auto，但它仍然相同。我尝试将position更改为relative，但它不起作用。我添加了margin-top:-15%;，以便在没有移动键盘的情况下将我的登录位置略微低于我的标题。但是使用键盘，它看起来就像我上面发布的图像。因此，我需要将元素固定在原始位置。

有没有人知道如何解决这个问题？