I am designing a form for mobile application using HTML and CSS. The form has a registration page which contains several text fields. The header and footer positions are fixed. My problem is when I click on a particular text field (given \[code\]onfocus\[/code\] functionality to the field) and scroll the page, the screen moves up within the header and footer as they are fixed but the selected field alone goes top of the header. I don't understand why this is happening when the selected text field alone goes up and the rest of the form sculls inside the header. The below image illustrates my problem:
When I select the username text box and scroll up, this field alone goes up to the header and the other fields are scrolling within the header and footer.Note: here the header and footer are kept fixed.