我有一个聊天html，我把一些东西放在div里面。我在overflow-y上激活了滚动，这是有效的。问题是我需要一个不会在屏幕上移动的文本框。
我希望它看起来像一个聊天窗口，div固定在屏幕上，文本框向下。问题是，div在其内容中延伸，导致屏幕溢出并显示滚动条。这样，文本框就不会一直可见。
编辑：更新了拼写错误（添加了px，100％到内容div应该是这样）而且，内部滚动条不起作用，并且roomname 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>
答案 0 :(得分：0)
使用下面的css为您的div，您需要bottom:0以及position:fixed
<div id="textsend">
<input id="sendtxt" type="text" />
<div/>
的CSS：
div#textsend{
position:fixed;
bottom:0;
width:100%;
padding:0;
margin:0;
}
你也应该重新排序你的CSS并删除拼写错误。如果不是0，则在提供填充和边距时使用px。
body {
background-color:#111;
color:white;
}
div#content{
display:block;
margin:0;
padding:0;
overflow-y: auto;
}
div#textsend{
position:fixed;
bottom:0;
width:100%;
padding:0;
margin:0;
}
input#sendtxt{
width:100%;
margin-top:10px;
font-family: Courier;
padding:10px;
border:none;
display:block;
outline:none;
background:#333;
color:#fff;
}
div.sb-tmes {
background-color:#444;
}
div#content {
background-color:#222;
}
div.sb-ymes{
background-color:#555;
}<html lang="en-US">
<head>
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<title>Speech Bubble Chat [Test]</title>
</head>
<body>
<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>
</div>
<div id="textsend">
<input id="sendtxt" type="text" />
<div/>
</body>
</html>
答案 1 :(得分：0)
它几乎已经奏效了。在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%;
}
您还需要在“聊天”窗口中设置高度，以便滚动。见小提琴：
答案 2 :(得分：0)
您可以考虑使用Flexbox进行页面布局。
CSS Flexible Box Layout是CSS的一个模块，它定义了为用户界面设计优化的CSS盒模型。在flex布局模型中，flex容器的子节点可以在任何方向布局，并且可以“弯曲”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父节点。
它可能有助于简化您对这些基础知识的布局：
body {
display: flex;
flex-direction: column;
}
#chatbox {
flex-grow: 1;
overflow-y: scroll;
}
以下是一个例子：
html,body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
#header {
background-color: black;
color: gray;
padding: .5em 0;
font-size: 2em;
text-align: center;
text-transform: uppercase;
}
#chatbox {
flex-grow: 1;
overflow-y: scroll;
background-color: black;
}
#prompt input {
box-sizing: border-box;
width: 100%;
padding: .5em 1em;
font-size: 1.4em;
color: white;
background-color: black;
border: none;
}
.chat_entry {
padding: .5em .25em;
background-color: #444;
color: white;
}
.chat_entry:nth-child(even) {
background-color: #666;
}
.system {
padding: .5em 1em;
color: red;
}<div id="header">Header</div>
<div id="chatbox">
<div class="chat_entry">
<font class="alias" color="#af0"><ADMIN> </font>
<span>FIRST ENTRY.</span>
</div>
<div class="chat_entry">
<font class="alias" color="#0cc"><LUSY> </font>
<span>Howdy, Henri... What IS this thing we are usin</span>
</div>
<div class="chat_entry">
<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="chat_entry">
<font class="alias" color="#0cc"><LUSY> </font>
<span>GREAT! Can I have some... new friends???</span>
</div>
<div class="chat_entry">
<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="chat_entry">
<font class="alias" color="#0cc"><LUSY> </font>
<span>Oh! Hello master Vitor. How are Akimaru-sama, and the others going?</span>
</div>
<div class="chat_entry">
<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="chat_entry">
<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="chat_entry">
<font class="alias" color="#af0"><Hohen-senpai> </font>
<span>Rioku hates him. Azariel hates him too.</span>
</div>
<div class="chat_entry">
<font class="alias" color="#0ff"><Henri> </font>
<span>Oh... that makes more sense.</span>
</div>
<div class="chat_entry">
<font class="alias" color="#af0"><Hohen-senpai> </font>
<span>It's all right. He's still happy, anyways.</span>
</div>
<div class="chat_entry">
<font class="alias" color="#0cc"><LUSY> </font>
<span>Howdy, Henri... What IS this thing we are usin</span>
</div>
<div class="chat_entry">
<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="chat_entry">
<font class="alias" color="#0cc"><LUSY> </font>
<span>GREAT! Can I have some... new friends???</span>
</div>
<div class="chat_entry">
<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="chat_entry">
<font class="alias" color="#0cc"><LUSY> </font>
<span>Oh! Hello master Vitor. How are Akimaru-sama, and the others going?</span>
</div>
<div class="chat_entry">
<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="chat_entry">
<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="chat_entry">
<font class="alias" color="#af0"><Hohen-senpai> </font>
<span>Rioku hates him. Azariel hates him too.</span>
</div>
<div class="chat_entry">
<font class="alias" color="#0ff"><Henri> </font>
<span>Oh... that makes more sense.</span>
</div>
<div class="chat_entry">
<font class="alias" color="#af0"><Hohen-senpai> </font>
<span>It's all right. He's still happy, anyways.</span>
</div>
<div class="chat_entry">
<font class="alias" color="#af0"><ADMIN> </font>
<span>LAST ENTRY.</span>
</div>
</div>
<div id="prompt">
<input type="text" placeholder="TYPE HERE">
</div>