Question

所以我在node.js here和socket.io中构建了一个聊天室，我将所有用户的消息附加到一个名为chatlog-display-div的div中，但是div继续显示在另一个div下面，当我尝试使高度更小（80％）它根本没有调整大小这是我的风格

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;
}

这是我的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>

有人可以帮助我吗

Answer 1

据我所知，我认为您想将div滚动到输入的最后一条消息。为此，每次使用jQuery("#chatlog-display-div").append

附加文本后添加以下行

$("#chatlog-display-div").scrollTop($("#chatlog-display-div").prop("scrollHeight"));

自动滚动到固定div的底部

1 个答案: