如何在 div 的末尾保留输入

Question

好吧，伙计们，我想在 div 的末尾留下我的输入和我的按钮，但我根本做不到，我正在尝试聊天，我需要风格化还有一些东西所以不要太介意设计，看看现在的样子:

问题：

伙计们，我不知道你是否还能看到输入，按钮不在 div 的末尾，当我将 div 滚动到一起时，因为它有一个 fixed的位置但是input和button还是在同一个地方，也就是没有停留在div的末尾，我希望它在div的底部.

我的代码：

Html:

<div class="chat">
 <div class="ul" id="messages"></div>
 <div class="send">
  <input class="text" autofocus="" id="menssagem" autocomplete="off" placeholder="Cloud está em apuros!">
  <button class="btn" id="enviar_menssagem">Send</button>
 </div>
</div>

Css:

@keyframes animationButton  {  
 0%{                                              
  filter:hue-rotate(0deg);                       
 }
 100%{
  filter:hue-rotate(360deg);
 }                                              
}

.chat{
display:block;
position:fixed;
top:0;
width:100%;
height:100vh;
background:#363636;
z-index:1;
}

.send {
width:100%;
height:20%;
background:#373737;
overflow:hidden;
}

.send .text {
float:left;
width:75%;
height:50px;
border: double 2px transparent;
border-radius:7px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, red,green, yellow, blue);
background-origin: border-box;
background-clip: content-box, border-box;
animation:animationButton .5s infinite;
}

总结： 您可以更改 send div 的背景以便更好地查看，如果将背景更改为不同的颜色，您将看到输入和按钮不在末尾 send div 我想要输入并且按钮在 div 发送的末尾，但我需要我的 chat div 仍然有一个固定的position 因为我需要确保如果人滚动元素将随页面滚动并不重要并且 div 将占据屏幕的 100%，请注意即使我滚动时也使用 position fixed div 仍然占据 100% 的屏幕，我需要它保持如此

I would like to say that I am Brazilian and my English is not so good, and I cannot ask questions in the Portuguese stack overflow, so the names of the html ids and classes are in English

Answer 1

您可以使用 grid 和 flex 布局的组合轻松实现此目的。

html, body{
  margin: 0;
  padding: 0;
}

.chat {
  height: 100vh;
  display: grid;
  grid-template-rows: calc(100vh - 50px) 50px;
}

.send{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  column-gap: 1rem;
}

.send input{
  width: 100%;
}

<div class="chat">
  <div class="ul" id="messages"></div>
  <div class="send">
    <input class="text" autofocus="" id="menssagem" autocomplete="off" placeholder="Cloud está em apuros!">
    <button class="btn" id="enviar_menssagem">Send</button>
  </div>
</div>

如何在 div 的末尾保留输入

How to leave input at the end of a div

html

css

responsive-design

responsive