How to prevent mobile keyboard from rising footer over the text fields?


Tags: android,html,css,twitter-bootstrap,mobile-browser

Problem :

I am having trouble with my footer. I want the footer to stay at the bottom of the screen, but there is a slight problem. When using mobile browser, some fields get blocked by the footer when opening the keyboard. The footer rises over the keyboard and blocks the field you are typing in. How can I keep my footer at the bottom and prevent it from rising over the keyboard? I want it to stay hidden under the keyboard.

I am using bootstrap, but I have set the following stuff in my own CSS:

footer {
 width: 100%;
 position:absolute;
 left:0px;
 bottom:0px;
 height: 40px;
 margin: auto;
 overflow: hidden;
 background:#2E2E2E;
 text-align:center;
 line-height: 15px;
 color: #fff;

}

<html>
 <body>
  <div class="container">
  </div>
  <footer class="bs-footer" role="contentinfo">
 </body>
</html>

As you can see here. When I am activating the field "Salasana", the footer rises and blocks the text field.

Before opening the keyboard:

pic1

After opening the keyboard:

pic2



Solution :

Solved the problem with avinash help. I ended up changing the following in my CSS. Since I have all the content inside the container div I made container height 100% - footer. I also removed bottom:0px from footer.

footer{
 position: relative;
}
html,body {
    height: 100%; /* Needed for container's min-height  */  
}

.container{
    min-height:100%;
    margin-bottom: -40px; /* Put negative height of the footer here */
    padding-bottom: 40px; /* Put height of the footer here. Needed for higher than screen height pages */
}

    CSS Howto..

    How does jQuery affect CSS structure

    How to keep text aligned with the middle of a textarea?

    How to add Css classes in TinyMCE editor Styles drop down through coding

    CSS Sprites - How to leave Hover button in depressed state

    How do I fix this alignment issue in jQuery & CSS?

    How to remove space from top of web page

    how can i make the li inside the div be horizontal?

    Off-canvas navigation: How to make a second-level menu slide in on top of first-level menu without covering body text?

    How to style Menu border/outline in JavaFX8 using CSS?

    How do I make my banner image stretch to fit the width of the page if the page width exceeds image width?

    How to GPU accelerate CSS transform?

    How do you make a menu scroll with the page, but leave the logo

    How to style QTableView CSS

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    how to make div with image like below in html and css

    How to put text and image in a same line?

    Want to override Bootstrap, but how to avoid the use of !important?

    How to convert RGBA to filter for older IE browsers

    How to get background image from internal css using xpath?

    CSS/Bootstrap: How to stretch containers within cols full-height?

    How to create a texture paper background using CSS without image

    How to show two rows of div in single div

    How to center banner with jquery mobile?

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    How create an overlay button on different containing div

    How to offset content under a navbar when using height:100%?

    How to make an element match the height of a dynamic page

    How to place the text after thumbnails at the bottom?

    How to combine jQuery animate with css3 properties without using css transitions?

    HTML/CSS: How to create a box for the footer?