html - HTML/CSS 中的(真正)固定 DIV

Question

在我的网页中，我有一个标题 DIV，其位置设置为固定。这意味着它应该在页面滚动时保持在相同的位置，不是吗？

在同一网页的底部，有一个页脚 DIV，其中包含一个输入文本。该位置也设置为固定。这应该没有任何问题，但不幸的是，固定属性似乎根本不起作用。

在我的 iPhone 上，当我点击输入字段时，键盘明显出现，滚动页面……在 Windows Phone 的 Internet Explorer 上的行为相同。到目前为止，我还没有在任何 Android 设备上测试过它，但我确信它不会起作用。

所以我的问题是:如何制作一个真正固定位置的 DIV？当键盘打开时，我希望标题 DIV 保留在屏幕顶部。

谢谢!

<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>

Answer 1

试试这个:

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