如何在div的末尾留下输入答案

【问题标题】：How to leave input at the end of a div如何在div的末尾留下输入
【发布时间】：2021-04-07 07:38:05
【问题描述】：

好吧，伙计们，我想把我的输入和我的按钮留在 div 的末尾，但我根本不能这样做，我正在尝试聊天，我需要对一些东西进行风格化，所以不要'不要太在意设计，看看现在的样子：

问题：

伙计们，我不知道您是否可以再看到输入并且按钮不在 div 的末尾，当我一起滚动 div 时，因为它有一个 fixed 位置，但输入和按钮仍然在同一个地方，也就是不停留在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 的末尾，而我想要输入并且 Button 在 div 发送的末尾，但我需要我的chat div 仍然有一个固定的位置，因为我需要确保该人滚动是否无关紧要元素将随着滚动页面，并且 div 将占据 100% 的屏幕，请注意，即使我滚动 div 仍然占用 100% 的屏幕，使用固定位置，我需要保持这样

我想说我是巴西人，我的英语不太好，在葡萄牙语堆栈溢出中我无法提问，所以html id和类的名称都是英文的

【问题讨论】：

标签： html css responsive-design responsive

【解决方案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>

【讨论】：