How to align <li> items from a <ul> list below?

Question

The idea is to create a chat similar to skype, Whatsapp, etc... Where messages start to appear from bottom to top until they reach ul height so the scroll bar appears.

    ul {
        list-style: none;
        height:380px;
        width:500px;
        overflow-y:auto;
        padding:5px;
        background-color:#ccc;
    }
    ul>li {
        height:80px;
        margin-bottom:5px;
        width:100%;
        background-color:#888;
    }

    <ul>
        <li>111111111111</li>
        <li>222222222222</li>
    </ul>

Answer 1

I do so using the properties display:table and display:table-Cell and vertical-align:bottom

display:table - Parent Element DIV

display:table-Cell - Child Element UL with vertical-align:bottom

div {
  display: table;
  width: 100%;
}
ul {
  list-style: none;
  height: 340px;
  width: 100%;
  padding: 5px;
  background-color: #ccc;
  display: table-cell;
  vertical-align: bottom;
}
ul>li {
  height: 80px;
  width: 100%;
  background-color: #888;
}

<div>
  <ul>
    <li>111111111111</li>
    <li>222222222222</li>
  </ul>
</div>

Answer 2

Do this, in case you need the container of ul to have the exact size of 380px as in the example, you will have to have a div on the outside with this measure for it:

ul {
    list-style: none;
   max-height:380px;
    width:500px;
    overflow-y:auto;
    padding:5px;
    background-color:#ccc;

     position: absolute;
    bottom:0;   
}
ul>li {
    height:80px;
    margin-bottom:5px;
    width:100%;
    background-color:#888;
}

<ul>
    <li>111111111111</li>
    <li>222222222222</li>
</ul>

Answer 3

You create a Javascript like this:

function updateScroll() {
    var element = document.getElementById("teste");
    element.scrollTop = element.scrollHeight;
}
updateScroll();

var timerId = window.setInterval(1, 1000);

setTimeout(function () {
    clearInterval(timerId)
}, 10000);

In CSS you don’t need to change anything, but you can use the following to hide the bar (but it will still work)

ul::-webkit-scrollbar{
    display: none;

}

Just put an id in ul and put the name of that id in Javascript instead.

Link Jsfiddle

function updateScroll() {
    var element = document.getElementById("teste");
    element.scrollTop = element.scrollHeight;
}
updateScroll();

var timerId = window.setInterval(1, 1000);

setTimeout(function () {
    clearInterval(timerId)
}, 10000);

ul {
    list-style: none;
   max-height:380px;
    width:500px;
    overflow-y:auto;
    padding:5px;
    background-color:#ccc;

     position: absolute;
    bottom:0;   
}
ul>li {
    height:80px;
    margin-bottom:5px;
    width:100%;
    background-color:#888;
}


ul::-webkit-scrollbar{
    display: none;

}

<ul id="teste">
    <li>111111111111</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222sasa222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>22asa</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
   <li>222222sasa222222</li>
<li>222222sasa222222</li>
    
    <li>FINAL</li>
    
</ul>

Answer 4

Alexander, for vc do this chat vc have to work with PHP type language and database like MYSQL, as they will be responsible for storing and show on the screen the other person’s response.

But the functional part where you send it looks something like this:

function sendMsg(){
  var send = $('.send_msg').val();
  if(send){
    $('.display_msg').append('<li>' + send + '</li>');
     $('.send_msg').val('');
     $('.display_msg').scrollTop($('.display_msg').height()); // FALTOU ESTE TRECHO
  }
}

ul {
        list-style: none;
        height:380px;
        width:500px;
        overflow-x:auto;
        padding:5px;
        border: 1px solid #333;
    }
    ul>li {
        margin-bottom:5px;
        background-color:#888;
        padding: 10px;
    }
    ul>li.receive{
        background-color:#ddd;        
    }
    .send_msg{
        border: 1px solid #333;
        height: 50px;
        width: 500px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="display_msg">
    <li class="send">111111111111</li>
    <li class="receive">222222222222</li>
</ul>
<textarea class='send_msg'></textarea><br>
<button type="button" onclick="sendMsg()">Enviar</button>