当输入点击时出现键盘（iPhone）时，如何使标题粘在顶部？答案

【问题标题】：How to make a header stick at top when keyboard appears (iPhone) on input click?当输入点击时出现键盘（iPhone）时，如何使标题粘在顶部？
【发布时间】：2014-12-15 20:11:28
【问题描述】：

我正在构建一个聊天应用程序，它包含页眉、内容，有时还有页脚（不在聊天视图中时）。

我已经将页眉和页脚设置为“粘性”，以便它们始终出现在内容的前面并保持在顶部和底部。但是，当我按下输入框并开始输入时，标题会从屏幕推到顶部。理想情况下，我希望页脚和内容被滚动，但页眉保持 - 在顶部和前面。

CSS：

#wrapper {
    min-height:100%;
    position: relative;
    padding: 0;
}

#header {
    position: fixed;
    top: 0;
    padding-top: 10px;
    height: 50px;
    width: 100%;
    font-size: 16px;
    color: #fff;
    background: #1A1A1A;
    text-align: center;
    line-height: 1.8;
    margin-left: -10px;
}

#content {
    padding-bottom: 120px;
    padding-top: 65px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    line-height: 2.5;
}

#footer {
    position: fixed;
    bottom:0;
    padding-top: 15px;
    height: 50px;
    line-height: 1.8px;
    width:100%;
    font-size: 20px;
    color: #fff;
    background: #1A1A1A;
    text-align: center;
    margin-left: -10px;
}

Index.html

<div id="wrapper">
<div id="header"> Header /div>

<div id="content"> Header 

 <input  class="chatinput" placeholder="Start typing..." ng-model="newPost"/>

/div>

<div id="footer"> Header /div>
/div>

**如何实现？

这与过度滚动有关吗？**

【问题讨论】：

请添加您的代码，而不是假 css 作为 'postition:fixed'
我已经添加了，但是位置固定和顶部是最关键的部分
postition 不是有效的 css 属性，请添加您的真实代码，如果您可以提供 JSFiddle 或 SO 代码 sn-p 更好
你能提供一个使用jsfiddle.net的例子吗？
我在这里读到了关于位置属性的信息：w3schools.com/cssref/pr_class_position.aspAm on phone 现在很难创建 JSFiddle，也许以后。

标签： javascript html css

【解决方案1】：

下次你应该提供一个例子。

此代码将使标题始终位于窗口顶部。

#header {
position: absolute;
left: 0;
top: 0;
width: 100%;
}

祝你好运！

【讨论】：

谢谢，但在 safari 中打开时不起作用。是的，标题仍然在顶部，但是当我按下底部的输入框时，整个页面都会移到顶部，包括标题。