0
So baute ich einen Chatraum in node.js here und socket.io und ich füge alle Benutzer Nachrichten an ein div namens chatlog-display-div, aber das Div bleibt unter dem anderen div angezeigt und wenn ich versuchen, die Höhe, die kleine (80%), um es hier überhaupt all mein Stil der Größe tutAutoscrolling auf den Boden eines festen div
body{
background:rgb(28,28,29);
padding:0;
margin:0;
}
.main-div{
}
#chat-rooms-div{
padding-top:30px;
position:fixed;
left:0;
width:300px;
top:50px;
height:100%;
background:#2e3136;
bottom:0;
}
#chat-rooms-div-a{
color:darkcyan;
font-family: helvetica;
font-style:none;
}
#chat-rooms-div-li{
list-style:none;
display: inline;
margin-left: 5px;
margin-right:5px;
}
#main-header-div{
z-index: 1;
background:#24272b;
top:0;
left:0;
position:fixed;
width:100%;
height:50px;
}
#chat-box-div{
padding: 0;
font-family: helvetica;
position:fixed;
top:50px;
height:100%;
width:100%;
background-color:#36393e;
left:300px;
overflow-y: scroll;
overflow-x: none;
}
#main-header-div-text{
width:120px;
color:darkcyan;
font-family: helvetica;
font-size: 20px;
vertical-align: center;
margin-top:15px;
margin-left: 90px;
}
#main-header-div-text:hover{
transition:ease-in-out .3s;
color:white;
}
::-webkit-input-placeholder {
color: darkcyan;
}
:-moz-placeholder { /* Firefox 18- */
color: darkcyan;
}
::-moz-placeholder { /* Firefox 19+ */
color: darkcyan;
}
:-ms-input-placeholder {
color: darkcyan;
}
#chatlog-display-div{
padding-left: 5px;
padding-top:10px;
font-family: helvetica;
position:fixed;
top:50px;
width:100%;
background-color:transparent;;
left:300px;
overflow-y: scroll;
overflow-x: none;
bottom:52px;
}
#chatroom-box{
padding-top:8px;
width:300px;
height: 20px;
background:transparent;
color:darkcyan;
font-family: helvetica;
}
#chatroom-box-link{
font-family: helvetica;
color:darkcyan;
text-decoration:none;
}
#chatroom-box-link:hover{
transition:ease-in-out .3s;
color:#006666;
}
#chat-box-div-hr{
left:305px;
width:95%;
position:fixed;
bottom:45px;
margin-right:5px;
}
hr{
border:1px solid;
color:#424549;
}
#chat-box-div-submit{
margin-left:0;
height:30px;
background:darkcyan;
width:70px;
outline: none;
}
#chat-box-div-txtinpt{
width:69%;
min-width:100px;
margin-top:10px;
margin-bottom:10px;
margin-left: 10px;
margin-right:0;
outline-color: darkcyan;
padding-left: 10px;
}
#chat-controls-div{
padding: 0;
width: 100%;
height: 55px;
background:transparent;
position: fixed;
bottom:0;
left:300px;
}
.submit{
background:darkcyan;
border:0;
border-radius:4px;
}
#main-header-div-search-txtinpt{
position:fixed;
width:60%;
height:35px;
top:7px;
margin-right:50%;
right:-30%;
background:transparent;
border:2px solid darkcyan;
border-radius:4px;
padding-left:10px;
color:darkcyan;
outline-color: darkcyan;
}
.big-txtinpt{
height:30px;
background: transparent;
border-radius:4px;
border:2px solid darkcyan;
color:darkcyan;
}
.servertxt{
color:cyan;
}
hier ist mein index.html
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta name="author" content="Nicholas Hendricks">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<title>BillIsChill-2.0</title>
<link type="text/css" rel="stylesheet" href="http://billischill.ddns.net/billischill-2.0/css/masterStyle.css" />
<link type="text/css" rel="stylesheet" href="http://billischill.ddns.net/billischill-2.0/css/animate.css" />
</head>
<body>
<div id="main-header-div">
<p id="main-header-div-text">BillIsChill-2.0<p>
<form>
<input id="main-header-div-search-txtinpt" class="search" placeholder="Search" name="search"/>
</form>
</div>
<div id="chat-rooms-div" class="main-div">
<div id="rooms">
</div>
</div>
<div id="chat-box-div" class="main-div">
<div id="chatlog-display-div">
</div>
<form id="chatform" action="">
<hr id="chat-box-div-hr">
<div id="chat-controls-div">
<input id="chat-box-div-txtinpt" class="big-txtinpt"type="text" spellcheck="false" placeholder="Message">
<input id="chat-box-div-submit" class="submit" type="submit" value="Send">
</div>
</form>
</div>
<div id="online-users-div">
<div>
<script>
var socket = io();
socket.on('connect', function(){
socket.emit('adduser', prompt("What's your name?"));
});
socket.on('updatechat', function (username, data) {
$('#chatlog-display-div').append(username + data);
});
socket.on('welcomeuser', function(data, username){
jQuery("#chatlog-display-div").append(data + username);
});
socket.on('updaterooms', function(rooms, current_room) {
$('#rooms').empty();
$.each(rooms, function(key, value) {
if(value == current_room){
$('#rooms').append('<div id="chatroom-box"><center>' + value + '<center></div><hr>');
}
else {
$('#rooms').append('<div id="chatroom-box"><center><a id="chatroom-box-link" href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></center></div><hr>');
}
});
});
function switchRoom(room){
socket.emit('switchRoom', room);
}
$('form').submit(function(e) {
e.preventDefault();
//gets the value from the message text feild and sets it as the message var
var message = {
text : $('#chat-box-div-txtinpt').val()
}
if (message.text.trim().length !== 0) {
socket.emit('chat-message',message);
//append the message to the chatlog-display-div
$('#chat-box-div-txtinpt').focus().val('');
jQuery("#chatlog-display-div").append('<div>'+message.text+'</div><hr>');
}
});
socket.on('chat-message', function (message) {
jQuery("#chatlog-display-div").append('<div>'+message.text+'</div><hr>');
});
</script>
kann mir jemand bitte helfen
für so etwas wie diesen verwenden, wäre es sehr hilfreich sein, wenn man es in einen Code-Schnipsel wirft, JSFiddle oder Codepen, und es abgekocht nur nach unten das Zeug, das wir brauchen. Wenn es so ist, ist es einfach zu viel zu analysieren. – samanime