WP, i.e. footer is not at the bottom

Question

I have one problem on nokia lumia 520, i.e. I didn’t have a footer at the bottom of the page, but on other Android devices everything is fine.

why in "mobile", i.e. do i have such a problem?

<div class="page-wrap"> </div> <footer> </footer> 

and css:

 html, body{ height: 100%; min-height: 100%; } .page-wrap{ min-height: 100%; margin-bottom: -70px; overflow: auto; background: green; } .page-wrap:after{ content: ""; display: block; } footer{ width: 100%; height: 50px; padding: 20px 0 0 0; background: #577abd; } @-ms-viewport{width:auto!important;height:320px!important} //or even without this line 

violin:

http://jsfiddle.net/pmp01rt4/

Answer 1

I tried your script with emulation Internet Explorer 11 (press F12) and on my Lumia 1520 (screenshot below). I do not see this as a problem.

However, I would suggest the following, which, in my experience, works more reliably in mobile browsers:

 article{ position:fixed; top:0; left:0; height:calc(100vh - 50px); width:100vw; background: green; } footer{ position:fixed; bottom:0; left:0; width: 100vw; height: 50px; padding: 20px 0 0 0; background: #577abd; } 

 <article></article> <footer></footer>