时间戳

首页 > 解决方案 > 如何在div的末尾留下输入

html - 如何在div的末尾留下输入

问题描述

好吧，伙计们，我想把我的输入和我的按钮留在 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;
}

总结： 你可以改变senddiv的背景才能更好看，如果你把背景换成不同的颜色你会看到input和Button不在 senddiv的末尾，我想要input和按钮位于 div 发送的末尾，但我需要我的chatdiv 仍然有一个固定的位置，因为我需要确保人滚动元素是否会随着页面滚动并且 div 会占据 100% 的屏幕，注意使用 position fixed 即使我滚动 div 仍然占据 100% 的屏幕，我需要保持这样

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

标签： htmlcssresponsive-designresponsive

解决方案

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>

推荐阅读