A (really) fixed DIV in HTML/CSS

Question

In my webpage, I have a header DIV, whose position is set to fixed. This means it should remain in the same position on page scrolling, shouldn't it?

On the bottom part of the same webpage, there is a footer DIV, which contains an input text. The position is set to fixed for it too. That should go without any problems, but unfortunately the fixed property seems not to work at all.

On my iPhone, when I click on the input field, the keyboard obviously comes up, scrolling the page... The same behaviour on Windows Phone's Internet Explorer. I've not tested it in any Android devices so far, but I'm sure it won't work.

So my question is: how do I make a really fixed position DIV? When the keyboard is opened, I want my header DIV to remain in the top of my screen.

Thanks!

<div style="border-bottom:1px solid #D3D3D3;text-align:center;background-color:#ff9e42;position: fixed;width:100%;padding-top:1px;padding-bottom:1px;">
   <p>This is my DIV content</p>
</div>
<div id="Body" style="padding-top:50px;">
   <iframe src="..." />
</div>
<div id="FOOTER" style="position:fixed;bottom:0px;background:#EFEFEF;color:gray;width:100%;border-top:1px solid #D3D3D3;">
   <p>Footer</p>
   <input type="text" />
</div>

The problem is that the keyboard will not change the size of your page, but only overlay over the bottom half. You webpage does not know if there is something everlayed or not. — CoderPi, Jan 14 '16 at 15:18
Hunter Turner, I've updated my question. I've cut off some parts of my header code because they were too long and not relevant. — PWhite, Jan 14 '16 at 15:22
You do realize that the viewport changes size when you open a keyboard on mobile, right? It would be similar to if you were to take your browser and resized it by dragging the bottom edge up. — Joseph Marikle, Jan 14 '16 at 15:27
@PWhite yes, that is how the browser handles the viewport, but that doesn't change the fact that opening a keyboard reduces the available height of a page. It'll still affect the bottom edge for fixed elements if you change the height of the browser (presumably by opening the keyboard) — Joseph Marikle, Jan 14 '16 at 15:31
Then, is it possible to keep the DIV on the top? I think this is quite easy to achieve, but I'm missing something and I really can't figure it out... — PWhite, Jan 14 '16 at 15:37
Maybe this will be useful: http://stackoverflow.com/questions/22861385/fixed-persistent-header-and-scroll-to-focussed-input-fields — Germano Plebani, Jan 14 '16 at 16:35
@GermanoPlebani I tried the method you suggested with no success: the header goes off-view without device-size in the viewport tag too. — PWhite, Jan 14 '16 at 18:51

SimplifyJS · Answer 1 · 2016-01-14T15:25:09.020

1

Try this:

 header {
     position: fixed;
     top: 0; // add this to set proper positioning
     left: 0; // add this to set proper positioning
}

edited Jan 14 '16 at 15:25

answered Jan 14 '16 at 15:23

SimplifyJS

518
1
6
12

Not sure why this was downvoted. I too assume it's an issue with OP using `bottom` instead of `top`. When the keyboard opens on mobile devices, the bottom of the viewport is raised. top however would remain the same. However, I would mention in your answer that OP should remove the `bottom` style or change it to `bottom: auto`. – Joseph Marikle Jan 14 '16 at 15:24
@PWhite can you provide a screenshot of the problem? It might make things clearer. Also, did you remove the `bottom:0px` before trying dreamypixy's answer? – Joseph Marikle Jan 14 '16 at 15:29
Removing the `bottom:0px;` brings the footer in the middle of the page. – PWhite Jan 14 '16 at 15:31
@JosephMarikle writing `bottom:auto;` is like removing the `bottom:0px;`. The footer is placed where the Body DIV ends. – PWhite Jan 14 '16 at 15:38
@PWhite I understand that. The fact is, you can't have a `bottom:0px` fixed element on mobile and expect the expanding keyboard to not push it up. The only way to ensure that it doesn't would be to affix it to the top. I know that completely defeats the purpose of it being a "footer", but ultimately what you are trying to achieve can only be done with a top fixed element. `bottom: 0` by nature will always keep your footer at the bottom of the viewport, and opening the keyboard by nature will always change the viewport height. – Joseph Marikle Jan 14 '16 at 15:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100693/discussion-between-pwhite-and-joseph-marikle). – PWhite Jan 14 '16 at 18:47

A (really) fixed DIV in HTML/CSS

1 Answers1