聊天消息在容器外溢出
[英]Chat messages overflow outside container
問題描述
我試圖使用AJAX和PHP進行實時聊天。 我將聊天框的高度設為300px，但是當我嘗試聊天時，數據超出了該元素的范圍。 當聊天超過該高度時，我希望它具有滾動條，以便我可以閱讀上面的聊天。 我怎樣才能做到這一點？
index.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
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;
}
外觀如下：
2 個解決方案
解決方案1
0 2018-02-23 19:31:18
只需使用css overflow-y:scroll; 該<div>元素和<div>元素的代碼將更改為可滾動的代碼。
此外，無限滾動將非常適合聊天框。
認為這可能會有所幫助...
<?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" style="overflow-y:scroll;">
<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; ?>
解決方案2
0 已采納 2018-02-23 19:57:29
我建議將chat_data從ID更改為類。 ID 必須是文檔唯一的，而類可以重復。
然后，在#chat_box上設置overflow-y:scroll可使元素在內容垂直溢出時滾動。
工作示例：
#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>
溢出：在容器外部可見
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.