Question

我正在构建一个聊天应用程序，其中包含标题，内容和有时页脚（不在聊天视图中时）。

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

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>

**如何实现这一目标？

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

Answer 1

您应该在下次提供示例。

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

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

祝你好运！

如何在输入点击时键盘出现（iPhone）时将标题粘在顶部？

1 个答案: