Adicione texto à parte inferior de uma div (ou outro elemento) - emulando o console de bate-papo

Question

Jul 07, 2014, 12:03 AM

Adicione texto à parte inferior de uma div (ou outro elemento) - emulando o console de bate-papo

Eu tenho uma div que deve coletar texto à medida que o texto é inserido na caixa de entrada (no momento, apenas reproduz a entrada, mas mais tarde deve produzir respostas semi-inteligentes.)

Quero que o texto apareça na parte inferior da div, no final escuro do gradiente. Quero que o texto novo esteja sempre na parte inferior e que o texto antigo suba para o cinza da área de rolagem superior.In other words, I'd like to reach the effect like in a terminal or on a chat console.

A página está aqui:http://mindseyetutoring.com/interrogate.html

Aqui está o meu código (vou eliminar o aspecto ajax para representar minimamente o problema):

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

e alguns dos 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%);
}