主頁 > 資料庫 > 如何使固定輸入保持在底部？

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

2022-01-09 08:28:32 資料庫

首先，我想說，除了上面的名字之外，我想不出更好的問題名稱。我的問題當然不僅僅涉及固定輸入。我將在這里詳細解釋我的問題。

基本資訊

所以，我正在制作一個實時聊天網站。該網站將成為body { display: grid }時尚。共有三列：第一列是您擁有的聊天串列，第二列是您選擇的當前聊天中的訊息，第三列顯示您選擇查看的聊天中的所有在線用戶。第一列和第三列各占頁面寬度的 20%。中間的（包含訊息的）將設定為auto寬度（這意味著它占用了剩余的可用空間，在這種情況下，它是頁面的 60%）。我對第一列和第三列沒有任何疑問。我的問題只圍繞第二個/中間一個。

此中間列將有一個聊天區域（所有訊息彈出的地方），底部有一個form帶有文本input和submit按鈕的 。目前，這個中間列不是display flexor display: grid。

我想要的是

當然，在出現大量訊息后div，包含所有這些訊息的overflow. 因此，如果需要，我已經添加overflow: auto到此div以使滾動條出現。由于 thediv和form它的下方由 a 分隔margin，因此滾動條只出現在它div的form下方，它不受影響。

我希望form在底部有 ，div但要設定所有訊息的overflow樣式，以便這些訊息出現在表單下。如何使固定輸入保持在底部？如圖所示input，如果用戶進一步向上滾動，則訊息位于 下方。如果需要進一步解釋以進行澄清，我很樂意提供幫助。

我嘗試過的/問題

我嘗試添加position: fixedandbottom: 0以form使其保持在底部。這變成了如何使固定輸入保持在底部？，這是期望的結果。到現在為止還挺好。

如果我發送訊息，我希望保留格式，所以我確定了哪個如何使固定輸入保持在底部？（忽略用戶名JohnDoe和內容左側的空格；那是用戶組態檔所在的位置）。同樣，一切仍然有效。

Now, for the final test, I wanted to make sure that the message overflow works as intended (with a scrollbar), and if I scroll up, the messages appear to "go under" the form, like the image I showed above. After a few messages, it turns into 如何使固定輸入保持在底部？, which is intended. And if I were to scroll up, 如何使固定輸入保持在底部？.

But, that only works for a few messages. After more messages pile in, this doesn't stay. 如何使固定輸入保持在底部？ is what it looks like after a few more messages. If it isn't visible at the first glance, here's an explanation: the input started getting pushed farther and farther down the page until I can only see half of it (hence, only half the input was visible in the image). If I were to keep sending messages, the input would fully go off the page.

My Code

如果您想清楚地檢查錯誤，這是我到目前為止的代碼：

@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 >
  <div></div>
  <div >
    <div >
    <span id="username" data-username="JohnDoe" >Username</span>
    <span >12:00 PM</span>
  </div>
  <span >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 ></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>

如果您想在這里澄清任何事情，請在下面發表評論。我很樂意提供幫助。

我已經在這個問題上停留了幾天。先感謝您。感謝所有幫助。

uj5u.com熱心網友回復：

將溢位移動到聊天包裝器

@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%;
  overflow-y: auto;
  overflow-x: hidden;
}

.chat-box {
  height: 90%;
  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;
}
<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 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 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 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 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 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 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 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 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 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 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 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 ></i>  not working on SO-->
          Send
        </button>
    </form>
  </div>
</div>

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

uj5u.com熱心網友回復：

我認為，如果您洗掉了表單包裝器的 100% 高度（它似乎并不重要）并添加了一個底部：0 或一些間距（如 10 像素），它會起作用。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/406169.html

標籤：

上一篇：如果li元素值不存在，Javascript會將其添加到空串列中

下一篇：為什么bootstrap5opacity-100不作業？[復制]

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • GPU虛擬機創建時間深度優化

    **?桔妹導讀：**GPU虛擬機實體創建速度慢是公有云面臨的普遍問題，由于通常情況下創建虛擬機屬于低頻操作而未引起業界的重視，實際生產中還是存在對GPU實體創建時間有苛刻要求的業務場景。本文將介紹滴滴云在解決該問題時的思路、方法、并展示最終的優化成果。 從公有云服務商那里購買過虛擬主機的資深用戶，一 ......

    uj5u.com 2020-09-10 06:09:13 more
  • 可編程網卡芯片在滴滴云網路的應用實踐

    **?桔妹導讀：**隨著云規模不斷擴大以及業務層面對延遲、帶寬的要求越來越高，采用DPDK 加速網路報文處理的方式在橫向縱向擴展都出現了局限性。可編程芯片成為業界熱點。本文主要講述了可編程網卡芯片在滴滴云網路中的應用實踐，遇到的問題、帶來的收益以及開源社區貢獻。 #1. 資料中心面臨的問題 隨著滴滴 ......

    uj5u.com 2020-09-10 06:10:21 more
  • 滴滴資料通道服務演進之路

    **?桔妹導讀：**滴滴資料通道引擎承載著全公司的資料同步，為下游實時和離線場景提供了必不可少的源資料。隨著任務量的不斷增加，資料通道的整體架構也隨之發生改變。本文介紹了滴滴資料通道的發展歷程，遇到的問題以及今后的規劃。 #1. 背景 資料，對于任何一家互聯網公司來說都是非常重要的資產，公司的大資料 ......

    uj5u.com 2020-09-10 06:11:05 more
  • 滴滴AI Labs斬獲國際機器翻譯大賽中譯英方向世界第三

    **桔妹導讀：**深耕人工智能領域，致力于探索AI讓出行更美好的滴滴AI Labs再次斬獲國際大獎，這次獲獎的專案是什么呢？一起來看看詳細報道吧！ 近日，由國際計算語言學協會ACL（The Association for Computational Linguistics）舉辦的世界最具影響力的機器 ......

    uj5u.com 2020-09-10 06:11:29 more
  • MPP (Massively Parallel Processing)大規模并行處理

    1、什么是mpp？ MPP (Massively Parallel Processing)，即大規模并行處理，在資料庫非共享集群中，每個節點都有獨立的磁盤存盤系統和記憶體系統，業務資料根據資料庫模型和應用特點劃分到各個節點上，每臺資料節點通過專用網路或者商業通用網路互相連接，彼此協同計算，作為整體提供 ......

    uj5u.com 2020-09-10 06:11:41 more
  • 滴滴資料倉庫指標體系建設實踐

    **桔妹導讀：**指標體系是什么？如何使用OSM模型和AARRR模型搭建指標體系？如何統一流程、規范化、工具化管理指標體系？本文會對建設的方法論結合滴滴資料指標體系建設實踐進行解答分析。 #1. 什么是指標體系 ##1.1 指標體系定義 指標體系是將零散單點的具有相互聯系的指標，系統化的組織起來，通 ......

    uj5u.com 2020-09-10 06:12:52 more
  • 單表千萬行資料庫 LIKE 搜索優化手記

    我們經常在資料庫中使用 LIKE 運算子來完成對資料的模糊搜索，LIKE 運算子用于在 WHERE 子句中搜索列中的指定模式。 如果需要查找客戶表中所有姓氏是“張”的資料，可以使用下面的 SQL 陳述句： SELECT * FROM Customer WHERE Name LIKE '張%' 如果需要 ......

    uj5u.com 2020-09-10 06:13:25 more
  • 滴滴Ceph分布式存盤系統優化之鎖優化

    **桔妹導讀：**Ceph是國際知名的開源分布式存盤系統，在工業界和學術界都有著重要的影響。Ceph的架構和演算法設計發表在國際系統領域頂級會議OSDI、SOSP、SC等上。Ceph社區得到Red Hat、SUSE、Intel等大公司的大力支持。Ceph是國際云計算領域應用最廣泛的開源分布式存盤系統， ......

    uj5u.com 2020-09-10 06:14:51 more
  • es~通過ElasticsearchTemplate進行聚合~嵌套聚合

    之前寫過《es~通過ElasticsearchTemplate進行聚合操作》的文章，這一次主要寫一個嵌套的聚合，例如先對sex集合，再對desc聚合，最后再對age求和，共三層嵌套。 Aggregations的部分特性類似于SQL語言中的group by，avg，sum等函式,Aggregation ......

    uj5u.com 2020-09-10 06:14:59 more
  • 爬蟲日志監控 -- Elastc Stack（ELK）部署

    傻瓜式部署，只需替換IP與用戶 導讀： 現ELK四大組件分別為：Elasticsearch（核心）、logstash（處理）、filebeat（采集）、kibana（可視化） 下載均在https://www.elastic.co/cn/downloads/下tar包，各組件版本最好一致，配合fdm會 ......

    uj5u.com 2020-09-10 06:15:05 more
最新发布
  • day02-2-商鋪查詢快取

    功能02-商鋪查詢快取 3.商鋪詳情快取查詢 3.1什么是快取？ 快取就是資料交換的緩沖區（稱作Cache），是存盤資料的臨時地方，一般讀寫性能較高。 快取的作用： 降低后端負載 提高讀寫效率，降低回應時間 快取的成本： 資料一致性成本 代碼維護成本 運維成本 3.2需求說明 如下，當我們點擊商店詳 ......

    uj5u.com 2023-04-20 08:33:24 more
  • MySQL中binlog備份腳本分享

    關于MySQL的二進制日志（binlog），我們都知道二進制日志（binlog）非常重要，尤其當你需要point to point災難恢復的時侯，所以我們要對其進行備份。關于二進制日志（binlog)的備份,可以基于flush logs方式先切換binlog，然后拷貝&壓縮到到遠程服務器或本地服務器 ......

    uj5u.com 2023-04-20 08:28:06 more
  • day02-短信登錄

    功能實作02 2.功能01-短信登錄 2.1基于Session實作登錄 2.1.1思路分析 2.1.2代碼實作 2.1.2.1發送短信驗證碼 發送短信驗證碼： 發送驗證碼的介面為：http://127.0.0.1:8080/api/user/code?phone=xxxxx<手機號> 請求方式：PO ......

    uj5u.com 2023-04-20 08:27:27 more
  • 快取與資料庫雙寫一致性幾種策略分析

    本文將對幾種快取與資料庫保證資料一致性的使用方式進行分析。為保證高并發性能，以下分析場景不考慮執行的原子性及加鎖等強一致性要求的場景，僅追求最終一致性。 ......

    uj5u.com 2023-04-20 08:26:48 more
  • sql陳述句優化

    問題查找及措施 問題查找 需要找到具體的代碼，對其進行一對一優化，而非一直把關注點放在服務器和sql平臺 降低簡化每個事務中處理的問題，盡量不要讓一個事務拖太長的時間 例如檔案上傳時，應將檔案上傳這一步放在事務外面 微軟建議 4.啟動sql定時執行計劃 怎么啟動sqlserver代理服務-百度經驗 ......

    uj5u.com 2023-04-20 08:26:35 more
  • 云時代，MySQL到ClickHouse資料同步產品對比推薦

    ClickHouse 在執行分析查詢時的速度優勢很好的彌補了MySQL的不足，但是對于很多開發者和DBA來說，如何將MySQL穩定、高效、簡單的同步到 ClickHouse 卻很困難。本文對比了 NineData、MaterializeMySQL（ClickHouse自帶）、Bifrost 三款產品... ......

    uj5u.com 2023-04-20 08:26:29 more
  • sql陳述句優化

    問題查找及措施 問題查找 需要找到具體的代碼，對其進行一對一優化，而非一直把關注點放在服務器和sql平臺 降低簡化每個事務中處理的問題，盡量不要讓一個事務拖太長的時間 例如檔案上傳時，應將檔案上傳這一步放在事務外面 微軟建議 4.啟動sql定時執行計劃 怎么啟動sqlserver代理服務-百度經驗 ......

    uj5u.com 2023-04-20 08:25:13 more
  • Redis 報”OutOfDirectMemoryError“（堆外記憶體溢位)

    Redis 報錯“OutOfDirectMemoryError（堆外記憶體溢位) ”問題如下： 一、報錯資訊： 使用 Redis 的業務介面 ，產生 OutOfDirectMemoryError（堆外記憶體溢位），如圖： 格式化后的報錯資訊： { "timestamp": "2023-04-17 22: ......

    uj5u.com 2023-04-20 08:24:54 more
  • day02-2-商鋪查詢快取

    功能02-商鋪查詢快取 3.商鋪詳情快取查詢 3.1什么是快取？ 快取就是資料交換的緩沖區（稱作Cache），是存盤資料的臨時地方，一般讀寫性能較高。 快取的作用： 降低后端負載 提高讀寫效率，降低回應時間 快取的成本： 資料一致性成本 代碼維護成本 運維成本 3.2需求說明 如下，當我們點擊商店詳 ......

    uj5u.com 2023-04-20 08:24:03 more
  • day02-短信登錄

    功能實作02 2.功能01-短信登錄 2.1基于Session實作登錄 2.1.1思路分析 2.1.2代碼實作 2.1.2.1發送短信驗證碼 發送短信驗證碼： 發送驗證碼的介面為：http://127.0.0.1:8080/api/user/code?phone=xxxxx<手機號> 請求方式：PO ......

    uj5u.com 2023-04-20 08:23:11 more

Copyright © 2010-2020 有解無憂