如何使固定输入保持在底部？答案

【问题标题】：How to make fixed input stay at bottom?如何使固定输入保持在底部？
【发布时间】：2022-01-09 08:58:48
【问题描述】：

首先，我想说，除了上面的名字，我想不出更好的问题名称。我的问题当然不仅仅涉及固定输入。我会在这里详细解释我的问题。

基本信息

所以，我正在制作一个实时聊天网站。该网站将采用body { display: grid } 方式。共有三列：第一列是您拥有的聊天列表，第二列是您选择的当前聊天中的消息，第三列显示您选择查看的聊天中的所有在线用户。第一列和第三列各占页面宽度的 20%。中间的（包含消息的）将设置为auto 宽度（这意味着它占用了剩余的可用空间，在这种情况下，它是页面的 60%）。我对第一列和第三列没有任何疑问。我的问题只围绕第二个/中间一个。

此中间列将有一个聊天区域（所有消息弹出的地方），底部有一个form，带有一个文本input 和一个submit 按钮。目前，这个中间列不是display flex 或display: grid。

我想要什么

当然，在出现大量消息后，包含所有这些消息的div 将是overflow。因此，如果需要，我已将 overflow: auto 添加到此 div 以使滚动条出现。由于div 和它下面的form 被margin 分隔，滚动条只出现在div 上，它下面的form 不受影响。

我希望 form 在此 div 的底部，但要设置所有消息 overflow 的样式，以便这些消息显示在表单下。如图所示，如果用户向上滚动，消息将位于 input 下方。如果需要进一步解释以便澄清，我很乐意提供帮助。

我尝试过的/遇到的问题

我尝试将position: fixed 和bottom: 0 添加到form 以使其保持在底部。这变成了，这是期望的结果。到目前为止一切顺利。

如果我发送消息，我希望保留格式，所以我确定了（忽略用户名 JohnDoe 和内容左侧的空格；这是用户个人资料所在的位置） .同样，一切仍然有效。

现在，对于最后的测试，我想确保消息溢出按预期工作（使用滚动条），如果我向上滚动，消息似乎“进入”form，就像图片一样我在上面展示了。几条消息后，它变成了，这是有意的。如果我向上滚动，。

但是，这只适用于少数消息。在更多消息堆积之后，这不会留下来。是几条消息后的样子。如果第一眼看不到它，这里有一个解释：input 开始被推到页面下方越来越远，直到我只能看到它的一半（因此，只有一半的输入在图像中可见）。如果我要继续发送消息，输入将完全离开页面。

我的代码

如果您想清楚地检查错误，这是我目前拥有的代码：

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

* {
  font-family: -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", Roboto,
    Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 0;
  margin: 0;
}

html,
body {
  background-color: #36393e;
  color: #fff;
  height: 100vh;
}

body {
  display: grid;
  grid-template-columns: 20% auto 20%;
}

.chat-wrapper {
  height: 100%;
}

.chat-box {
  height: 90%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

.chat-message {
  width: 100%;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  display: grid;
  grid-template-columns: 65px auto;
}

.chat-message:hover {
  background-color: #27292e;
}

.message-time {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  opacity: 50%;
  font-size: 12px;
  margin-right: 5px;
  margin-top: 0;
  margin-bottom: 0;
}

.chat-message:hover > .message-time {
  visibility: visible;
}

.message-user {
  display: flex;
  flex-direction: column;
}

.username {
  margin-right: 15px;
  color: #50c878;
  font-weight: bold;
  letter-spacing: 1px;
}

.user-time {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.form-wrapper {
  height: 100%;
  position: fixed;
  width: 60%;
}

.message-form {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #40444d;
  border-radius: 5px;
  flex-grow: 2;
  height: 40px;
}

.message {
  height: 30px;
  padding: 5px;
  padding-left: 10px;
  outline: none;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  flex-grow: 2;
  background-color: transparent;
}

.send {
  text-align: center;
  height: 40px;
  min-width: 50px;
  border: none;
  border-radius: 5px;
  margin: 0;
  font-size: 16px;
  background-color: transparent;
  color: #fff;
  opacity: 50%;
  transition: 0.3s;
}

.send:hover {
  cursor: pointer;
  opacity: 75%;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #121214;
  border-radius: 10px;
}

<!--
I have premade messages for you to see what the format would look like. If you would like to add more messages, please use the format below (add this code into #chat-box) :

<div class="chat-message">
  <div></div>
  <div class="message-user">
    <div class="user-time">
    <span id="username" data-username="JohnDoe" class="username">Username</span>
    <span class="message-time">12:00 PM</span>
  </div>
  <span class="message-content">Message content</span>
</div>
</div>

It turns out that the username will appear in every message, even when not needed. This is prevented by JavaScript, which isn't added here.
-->

<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>Chat</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <div class="chat-list-wrapper"></div>

  <div class="chat-wrapper">
    <div id="chat-box" class="chat-box">
      <div class="chat-message">
        <div></div>
        <div class="message-user">
          <div class="user-time">
            <span id="username" data-username="JohnDoe" class="username">JohnDoe</span>
            <span class="message-time">1:35 PM</span>
          </div>
          <span class="message-content">Testing.</span>
        </div>
      </div>
    </div>

    <div class="form-wrapper">
      <form id="message-form" class="message-form">
        <input type="text" name="message" placeholder="Send a message..." class="message" id="message" />
        <button type="submit" name="send" class="send" id="send">
          <!-- <i class="fas fa-paper-plane"></i>  not working on SO-->
          Send
        </button>
      </form>
    </div>
  </div>

  <div class="status-wrapper"></div>

  <script type="text/javascript" src="script.js"></script>
</body>

</html>

如果您想对这里的任何内容进行任何澄清，请在下面发表评论。我很乐意提供帮助。

我已经被这个问题困扰了几天了。先感谢您。感谢所有帮助。

【问题讨论】：

标签： html css css-position

【解决方案1】：

我认为，如果您删除表单包装器的 100% 高度（这似乎并不重要）并添加一个底部：0 或一些间距（如 10 像素），它会起作用。

.form-wrapper {
    position: fixed;
    bottom: 0;
    width: 60%;
}

【讨论】：

【解决方案2】：

所以，经过几个小时的工作，我终于把它修好了。我不必使用position: fixed 将input 保持在底部。我需要做的只是确保chat-box 有一个固定的height（它允许它开始滚动）。然后确保chat-wrapper 也有一个固定的height（否则，整个页面开始滚动，因为chat-wrapper 没有固定的高度，所以chat-box 只会填满它的90%，并且因为chat-wrapper 可以无限增长，所以chat-box 也可以。

input 自动原位，现在我有 grid 布局以及底部的 input，正如预期的那样。

【讨论】：