我有一个聊天 html，我在一个 div 中放了一些东西。我在 overflow-y 上激活了滚动，这很有效。问题是我需要一个不会在屏幕上移动的文本框。
我希望它看起来像一个聊天窗口，div 固定在屏幕上，文本框向下。问题在于，div 在其内容内拉伸(stretch)，导致屏幕溢出并显示滚动条。这样，文本框并不总是可见。
编辑:更新了拼写错误(添加了 px，并且 100% 到内容 div，因为它应该是)而且，内部滚动条不工作，房间名称 div 在内容 div 的前面，这样，我们看不到上面写的是什么。
div#roomnamediv{
font-family:courier;
text-align:center;
position:fixed;
top:0;
height:30; width:100%;
display:block;
background-color:#111;
}
div#content-wrapper{
margin-top:-10px;
margin-bottom:10px;
display:block;
height:100%;
}
div#content{
display:block;
margin:0;
padding:0;
overflow-y: scroll;
height:100%;
}
div#text-send{
padding:0;
margin:0;
display:block;
height:30px;
width:100%;
bottom:0;
position:fixed;
}
input#sendtxt{
width:100%;
font-family:courier;
padding:10px;
border:none;
display:block;
outline:none;
bottom:0;
}
body {
font-family: Courier;
font-width:23px;
padding:0;
}
div.sb-ymes {
display:block;
margin:10 10 10 auto;
padding:10;
max-width:70%;
}
div.sb-tmes {
left:0;
display:block;
margin:10 10 auto 10;
padding:10;
max-width:70%;
}
font.alias {
font-size:12;
display:block;
margin-bottom:5;
}
div.system {
display:block;
margin-left:auto;
margin-right:auto;
padding:10;
max-width:500;
text-align:center;
}
div.sb-tmes {
background-color:#444;
}
body {
background-color:#111;
color:white;
}
div#content {
background-color:#222;
}
div.sb-ymes{
background-color:#555;
}
input#sendtxt{
background-color:#333;
color:white;
}<html lang="en-US">
<head>
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<link href="theme-dark.css" rel="stylesheet">
<title>Speech Bubble Chat [Test]</title>
</head>
<body>
<div id="roomnamediv">
<h3 id="roomname">Henri's Office</h3>
</div>
<div id="content-wrapper"><div id="content">
<div class="sb-tmes">
<font class="alias" color="#0cc"><LUSY> </font>
<span>Howdy, Henri... What IS this thing we are using right now...?
</span>
</div>
<div class="sb-ymes">
<font class="alias" color="#0ff"><Henri> </font>
<span>This is an awesome new Chat i am planning to make on the future.</span>
<i class="em em-heart"></i>
</div>
<div class="sb-tmes">
<font class="alias" color="#0cc"><LUSY> </font>
<span>GREAT! Can I have some... new friends???</span>
</div>
<div class="sb-ymes">
<font class="alias" color="#0ff"><Henri> </font>
<span>Surely.<br><br>Also, I think you should socialize more with the other robots of Bitwin. Such as the Speech Bubble bots. Its... not officializated yet.<br><br>But it would be cool... wouldn't it? Also, I'll add someone new...!</span>
</div>
<div class="system">
<span><b>Hohen-senpai</b> joined the room.</span>
</div>
<div class="sb-tmes">
<font class="alias" color="#0cc"><LUSY> </font>
<span>Oh! Hello master Vitor. How are Akimaru-sama, and the others going?</span>
</div>
<div class="sb-tmes">
<font class="alias" color="#af0"><Hohen-senpai> </font>
<span>They're fine. Reisuke just had a child with Rioku. His name is <i>Azariel Lucifer.</i></span>
</div>
<div class="sb-ymes">
<font class="alias" color="#0ff"><Henri> </font>
<span>Whaaaaaaaaaat? With... RIOKU?! That's... very cool.<br><br>I think they both need a break after everything that happened. Good he will have a chance to be happy and have a family.</span>
</div>
<div class="sb-tmes">
<font class="alias" color="#af0"><Hohen-senpai> </font>
<span>Rioku hates him. Azariel hates him too.</span>
</div>
<div class="sb-ymes">
<font class="alias" color="#0ff"><Henri> </font>
<span>Oh... that makes more sense.</span>
</div>
<div class="sb-tmes">
<font class="alias" color="#af0"><Hohen-senpai> </font>
<span>It's all right. He's still happy, anyways.</span>
</div>
<br><br><br><br></div></div>
<div id="text-send">
<input id="sendtxt" type="text" />
<div/>
</body>
</html>最佳答案
它已经差不多可以工作了。在 CSS 中的一些样式规则之后，您缺少“px”。例如:
div#textsend {
padding: 0;
margin: 0;
display: block;
position: fixed;
height: 30px; /* add 'px' or '%' or some measurement after all numbers except 0 */
width: 100%;
}
您还需要为“聊天”窗口设置高度，以便它滚动。参见 fiddle :
关于HTML 聊天 - 相对于窗口的位置 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46227589/