Header and footer change their position after keyboard popup in IOS Using DOJO 1.10.3

Question

We developing hybride mobile application with DOJO 1.10.3.

In this application have a header and footer, all environments comming good except IOS(iphone) environment we getting one problem i.e

We want to fixed header and footer in android,windows and Blackberry header(top) and footer(down) is fixed but iphone it's not fixing and content also going up and they visible the text in status bar(battery,signal and time screen) when i given some value in input field,text area etc.

My requirement is fixed and not able scrolling for the header and also not showing in any text in status bar(battery,signal and time screen).

Please any one help for this problem

CSS CODE

.qHeaderBg h1 {
    height: 42px;
    border-top: 2px solid rgba(106, 106, 106, 1.0);
    border-bottom: 2px solid rgba(106, 106, 106, 1.0);
    display: table;
    line-height: 0px;
    vertical-align: top !important;
    top: 0px !important;
    width: 100%;
    position:fixed !important;
}

.qHeaderBg h2 {
    background: rgba(160, 32, 64, 1.0);
    height: 44px;
    border-top: 2px solid rgba(106, 106, 106, 1.0);
    border-bottom: 2px solid rgba(106, 106, 106, 1.0);
    vertical-align: bottom !important;
    bottom: 0px !important;
    width: 100%;
    position:fixed !important;
}

.qHeaderBg label {
    margin: 12px 8% 5px 7%;
    width: 85%;
    font-weight: bold;
    font-size: 14px;
    color: rgb(102, 102, 102);
    display: block;
}

.qHeaderBg input {
    margin: 0px auto 0px auto;
    font-size: 12px;
    font-weight: bold;
    text-indent: 10px;
    color: rgba(23, 82, 117, 1.0);
    display: block;
    width: 85%;
    height: 34px;
    border: 1px solid rgba(204, 204, 204, 1.0);
    border-radius: 0px;
    background-color: white !important;
    outline: none !important;
}

.qHeaderBg input[type="email"] {
    font-family: Times New Roman;
}

input:focus {
    border: 2px solid rgb(254, 207, 23);
    background-image: none;
}

.button {
    font-weight: bold;
    margin: 18px auto 0px auto;
    display: block;
    width: 85.5%;
    border: 1px solid rgb(204, 204, 204);
    height: 35px;
    font-size: 14px;
    line-height: 2.4;
    border-radius: 7px;
    outline: none;
}

.marginBottom {
    margin-bottom: 55px !important;
}

HTML code

<div id="Login_en_View" class="qHeaderBg englishFont"
        data-dojo-type="dojox.mobile.View">


<div data-dojo-type="dojox.mobile.ScrollableView" id="Login_en_View_Id"
    data-dojo-props="selected:false" >



    <h1 class="ui-title" id="Login_en_View_Header" data-dojo-          type="dojox.mobile.Heading"b data-dojo-props="fixed:'top'">
    </h1>


    <div id="Login_en_View_DivId" class="ui-content" data-role="content">

        <div class="errorMsg englishFont" id="Login_en_View_Error"></div>

        <div class="successMsg englishFont" id="Login_en_View_Success"></div>

        <label id="Login_en_View_Mno_lbl"></label> 
            <input id="Login_en_View_Mno_txt" class="clearFields englishFont"
                data-dojo-type="dojox.mobile.TextBox" onKeyDown="if(this.value.length==13 && event.keyCode != 8)return false;" type="number" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number"> 

        <label id="Login_en_View_Uc_lbl"></label> 
            <input id="Login_en_View_Uc_txt" class="clearFields englishFont" data-dojo-type="dojox.mobile.TextBox"
                onKeyDown="if(this.value.length==8 && event.keyCode != 8)return false;" type="password" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">  

        <button id="Login_en_View_Sub_Btn" data-dojo-type="dojox.mobile.Button" class="englishFont button"></button>

        <button id="Login_en_View_Reg_Btn" data-dojo-type="dojox.mobile.Button" class="englishFont button"></button>

        <button data-dojo-type="dojox.mobile.Button" id="Login_en_View_Ruc_Btn"  class="englishFont button marginBottom"></button>

    </div>


          <h2  id="Login_en_View_Footer" data-dojo-type="dojox.mobile.Heading"
                data-dojo-props="fixed:'bottom'">
    </h2>  




</div>

</div>