个人中心
gpt4 book ai didi

html - 聊天消息溢出容器外

转载 作者：行者123 更新时间：2023-11-28 02:07:15 26 4
gpt4 key购买 nike

我尝试使用 AJAX 和 PHP 进行实时聊天。我将聊天框设置为 300 像素高，但是当我尝试聊天时，数据超出了该元素。当聊天超过该高度时，我希望它有一个滚动条，以便我可以阅读上面的聊天。我该怎么做？

索引.php

<?php
include 'db.php';
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chat System</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript">
    function ajax(){
      var req = new XMLHttpRequest();
      req.onreadystatechange = function (){

        if(req.readyState == 4 && req.status ==200){
              document.getElementById('chat').innerHTML = req.responseText;

        }
      }
      req.open('GET','chat.php',true);
      req.send();
    }
    setInterval(function(){ajax()},1000);
  </script>
</head>
<body onload="ajax();">
  <div class="" id="container">
    <div id="chat_box">
      <div id="chat"></div>
    </div>
    <form class="" action="index.php" method="post">
      <input type="text" name="name" value="" placeholder="Name">
      <textarea name="msg"  placeholder="Enter Message"></textarea>
      <input type="submit" name="submit" value="Send It!">
    </form>
    <?php

    if(isset($_POST['submit']))
    {
      $name = $_POST['name'];
      $msg = $_POST['msg'];
      $query ="INSERT INTO chathere (name,msg) values ('$name','$msg')";
      $run= $lol->query($query);

      if($run)
      {

        // echo "<embed loop='false' src='chat.mp3' hidden='true' autoplay='true'/>";


      }
    }

    ?>
  </div>
</body>

聊天.php

<?php
include 'db.php';
$query = "SELECT * FROM chathere ORDER BY id DESC";
$run = $lol->query($query);
while($row = $run->fetch_array()) :
  ?>
  <div id="chat_data">
    <span style="color:green;"><?php echo $row['name']; ?></span>:
    <span style="color:brown;"> <?php echo $row['msg'];  ?></span>
    <span style="float:right;"><?php echo formatDate($row['date']) ?></span>
  </div>
<?php endwhile; ?>

CSS:

#container{
  width: 40%;
  background: white;
  margin: 0 auto;
  padding: 20px;
}
#chat_box{
  width: 90%;
  height: 400px;
  overflow-y:scroll;
}
#chat_data {
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid silver;
  font-weight: bold;
  overflow-y: scroll;
}

这是它的样子:

enter image description here

最佳答案

我建议将 chat_data 从 ID 更改为类。 ID must be unique到文档，而类可以重复。

然后，设置overflow-y:scroll在 #chat_box 上允许该元素在其内容垂直溢出时滚动。

工作示例:

#chat_box {
  width: 90%;
  height: 150px;
  overflow-y: scroll;
  border:1px solid silver;
}

.chat_data {
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid silver;
  font-weight: bold;
}
<div id="chat_box">

  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>

</div>

关于html - 聊天消息溢出容器外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48954902/

26 4 0
文章推荐： c++ - 如何忽略字符数组中的某些字母和空格
文章推荐： javascript - jQuery/Javascript 复选框
文章推荐： html - 创建自定义模板 WordPress AMP 后 Amp 不再有效
文章推荐： html - 根据第二个子div的高度动态调整第一个子div的高度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com