Fügen Sie Text am unteren Rand eines div (oder eines anderen Elements) hinzu, um die Chat-Konsole zu emulieren

Question

Jul 07, 2014, 12:03 AM

Fügen Sie Text am unteren Rand eines div (oder eines anderen Elements) hinzu, um die Chat-Konsole zu emulieren

Ich habe ein div, das Text sammeln soll, während Text in das Eingabefeld eingegeben wird (im Moment reproduziert es nur die Eingabe, aber später sollte es halbintelligente Antworten erzeugen.)

Ich möchte, dass der Text am unteren Rand des Bereichs und am dunklen Ende des Verlaufs angezeigt wird. Ich möchte, dass frischer Text immer am unteren Rand und alter Text im grauen Bereich des oberen Bildlaufbereichs auftaucht.In other words, I'd like to reach the effect like in a terminal or on a chat console.

Die Seite ist hier:http://mindseyetutoring.com/interrogate.html

Hier ist mein Code (ich werde den Ajax-Aspekt eliminieren, um das Problem minimal darzustellen):

<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="interroStyle.css">
    <script src="jquery/jquery.js"></script>
    <script>
        function process(){
           $('#userInput').keypress(function(e){
              if (e.keyCode == 13){
                 var userTxt = $("#userInput").val();
                 $("#prisonerResponse").html(userTxt);
              }
           })
        }
    </script>
    </head>
    <body onload = "process()">
        <p id="prisoner"> Prisoner One </p>
        <br>
        <p id="command" >address the prisoner:</p>
        <input type="text" id="userInput" />
        <div class="transcript" id="prisonerResponse">
                <p>
                </p>            
        </div>
    </body>
</html>

und einige der CSS:

#prisonerResponse {
    overflow: scroll;
    width: 350px;
    height: 100px;
    display: inline-block;
    margin: 10px;
    position: relative;
}
#prisonerResponse:before {
    content:"";
    width: 350px;
    height: 100px;
    position: fixed;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}