【发布时间】：2021-08-05 04:43:59
【问题描述】：
我正在为消息传递创建 SignalR Web 应用程序。正在发送的消息似乎与页脚（文本框、发送按钮）重叠，并且不会随着正在发送的消息一起滚动。
我的 CSS 如下：
body {
background-color: #2d3436;
}
.container {
background-color: #2d3436;
padding: 20px;
color: white;
max-height: 80%;
}
.textmessaging {
background-color: #474f52;
padding: 20px;
position:fixed;
bottom: 0;
width: 100%;
}
#message::-webkit-scrollbar {
width: 8px;
}
/* Track */
#message::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
#message::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(67, 74, 139, 0.8);
}
#message::-webkit-scrollbar-thumb:window-inactive {
background: rgba(67, 74, 139, 0.4);
}
#message {
resize: none;
outline: none;
background-color: rgba(0, 0, 0, 0.1);
width: 94%;
color: white;
}
#sendmessage {
margin: 0;
position: absolute;
height: 50%;
width: 5%;
outline: none;
top: 50%;
margin-left: 1%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.25);
border: none;
border-radius: 6px;
font-size: x-large;
}
#sendmessage:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#lightmodetoggle {
background-color: rgba(0, 0, 0, 0.25);
border: none;
margin: 10px;
border-radius: 6px;
font-size: x-large;
position: fixed;
outline: none;
}
#lightmodetoggle:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#discussion {
list-style-type: none;
}
#messagestyle {
padding: 5px;
border: 1px solid grey;
border-radius: 6px;
margin-bottom: 3px;
}
我的 HTML 如下：
<div id="maincontent">
<div class="container" id="data">
<ul id="discussion">
</ul>
</div>
<div class="textmessaging">
<textarea id="message" placeholder="Message..." rows="3" cols="50"></textarea><button id="sendmessage" data-toggle="tooltip" title="Send!"><i class='far fa-paper-plane'></i></button>
<input type="hidden" id="displayname" />
</div>
</div>
JS如下
<script src="Scripts/jquery-3.4.1.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<div><li id="appendedmsg"><strong>' + encodedName
+ '</strong><br><a id="messagestyle">' + encodedMsg + '<a></li></div>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// var msg = document.getElementById("message");
// var button = document.getElementById("sendmessage");
// textBox.addEventListener("keyup", function (event) {
// if (event.keyCode == 13) {
// button.click();
// }
// });
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
我已经进行了一段时间的搜索，但没有找到任何适合我需要的东西。
【问题讨论】：