Question

我正在使用聊天网络应用程序：

<div id="viewport">
  <div id="header-bar"></div>
  <div id="chat-messages"></div>
  <div id="input-form></div>
</div>

我怎样才能做到：

a）id = viewport始终是100％可见的屏幕（即使在safari mobile上消失/出现的底栏）

b）id =标题栏位于顶部

c）id =输入形式停留在底部

我已经尝试了div结构的所有组合（宽度/高度和位置）并且没有成功。任何人都可以指出我正确的方向吗？

我需要JS / JQ吗？

Answer 1

正如我从问题中理解的那样（提供更多代码可能有所帮助），你可能会有类似的意思。

#header-bar {
width:100%;
position:fixed;
top:0;
left:0;
background-color:#ccc;
overflow:hidden;
padding:.5rem;
z-index:1;
}
#input-form {
width:100%;
position:fixed;
bottom:0;
left:0;
background-color:#ccc;
padding:.5rem;
z-index:1;
}
#viewport {
width:100%;
height:100%;
display:flex;
}
#chat-messages {
width:100%;
height:80%;
display:flex;
flex-direction: column;
transform: translateY(2%);
z-index:0;
}
#chat-messages p {
width:100%;
height:20%;
}

<div id="viewport">
  <div id="header-bar">header</div>
  <div id="chat-messages"><p>message 1</p><p>message 2</p><p>message 3</p><p>message 4</p><p>message 5</p><p>message 6</p><p>message 7</p><p>message 8</p><p>message 9</p><p>message 10</p><p>message 11</p><p>message 12</p><p>message 13</p><p>message 14</p><p>message 15</p><p>message 16</p><p>message 17</p></div>
  <div id="input-form"><input type="text" name="name" /></div>
</div>

手机上的HTML聊天：保持div到位

1 个答案: