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

Question

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

基本信息

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

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

我想要的

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

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

我有什么Tried/Problems

我已经尝试将 position: fixed 和 bottom: 0 添加到 form 中，使其位于底部。变成，这是期望的结果。到目前为止一切顺利。

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

现在，对于最终测试，我想确保消息溢出按预期工作（使用滚动条），如果我向上滚动，消息似乎“进入”form ，就像我上面显示的图像一样。几条消息后，它变成了, which is intended. And if I were to scroll up, 。

但是，这只适用于少数消息。在更多消息堆积之后，这不会留下来。是几条消息后的样子。如果乍一看它不可见，这里有一个解释：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>

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

我已经在这个问题上停留了几天了。先感谢您。感谢所有帮助。

Answer 1

我认为，如果您删除 100% 高度的 form-wrapper（这似乎并不重要）并添加 bottom: 0 或一些间距，如 10 px，它会起作用。

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

Answer 2

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

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

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

How to make fixed input stay at bottom?

html

css

css-position

基本信息

我想要的

我有什么Tried/Problems

我的代码