CSS Position list to bottom so last list item is visible

Question

Wondering how I can position a list so the last item is always the first to be visible, I've positioned the list absolute: bottom but not sure how to make the contents scrollable, can anyone offer any suggestions? Is there a way of doing this with flex box? My problem is for the contents scroll I have to set height: 100% on div.chat__inner, this immediately jumps the list to the top.

CSS

    .chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
}

.chat__inner {
    position: absolute;
    bottom: 0;
}

.messages {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    margin: auto;
}

Fiddle http://jsfiddle.net/kyllle/jf2rvzag/

http://jsfiddle.net/ny2L61z5/ I'll post an answer... this has a few commented lines of code due to getting the request of updated chat. — deebs, Jul 29 '16 at 14:57
@styler check my answer which uses flex model as you have asked. — geeksal, Jul 29 '16 at 15:48

score 1 · Answer 1 · edited May 23 '17 at 12:08

Just add width: 100% and height: 100% to your messages container:

.chat__inner {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
}

And a little javascript (jquery) from here:

var div = $('.messages');
div.scrollTop(div.get(0).scrollHeight);

var div = $('.messages');
div.scrollTop(div.get(0).scrollHeight);

.chat {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid #000;
  overflow: hidden;
}

.chat__inner {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.messages {
  overflow: auto;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat">
  <div class="chat__inner">
    <div class="messages">
      <p>Message 1</p>
      <p>Message 2</p>
      <p>Message 3</p>
      <p>Message 4</p>
      <p>Message 5</p>
      <p>Message 6</p>
      <p>Message 7</p>
      <p>Message 8</p>
      <p>Message 9</p>
      <p>Message 10</p>
    </div>
  </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:14

slightly chagned your css:

.chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
}

.chat__inner {
    position: absolute;
    bottom: 0;
}

.messages {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    margin: auto;
}

fiddle: http://jsfiddle.net/jf2rvzag/1/

I don't think there is a good (if any) css solution because you will also have to take care of user actions. Have a look at: Keep overflow div scrolled to bottom unless user scrolls up

I'm sure this will help you.

deebs · Answer 3 · 2016-07-29T15:10:49.630

Fiddle here: http://jsfiddle.net/ny2L61z5/

I've done this using Javascript / jQuery before, scrolling to the bottom when the page is loaded or updated:

$(document).ready(function(){
  var oldscrollHeight = $(".messages").prop("scrollHeight") - 20; 
  //Scroll height before the request

  //--make request here--
  var newscrollHeight = $(".messages").prop("scrollHeight") - 20; 
  //Scroll height after the request

  if (newscrollHeight > oldscrollHeight) {
    $(".messages").animate({ scrollTop: 100000 }, 'fast');
  }
})

EDIT: I don't believe the .chat-inner class with position absolute is needed. And adding a defined height to your .messages class will allow scrolling:

.chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
}


.messages {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 200px;
    margin: auto;
}

score 0 · Answer 4 · answered Jul 29 '16 at 15:48

I think that you are creating a chat application or something like that hence you want to display the last message always on the top.

You can can achieve this by using flex model.

Apply display:flex; to both .chat__inner and .messages and make overflow-y: auto for .chat so, that scrollbar will be displayed in case of overflow.

Along with this also set flex-direction: column-reverse in .messages to make the list appear in bottom to top fashion. You can see rest of the changes I have made in the code below.

.chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow-y: auto;
}

.chat__inner {
     display:flex;
  }

.messages {
    position: relative;
    overflow:auto;
     -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
     margin: auto;
     display:flex;
     flex-direction: column-reverse;
}

<div class="chat">
    <div class="chat__inner">
        <div class="messages">
            <p>Message 1</p>
            <p>Message 2</p>
            <p>Message 3</p>
            <p>Message 4</p>
            <p>Message 5</p>
            <p>Message 6</p>
            <p>Message 7</p>
            <p>Message 8</p>
            <p>Message 9</p>
            <p>Message 10</p>
        </div>
    </div>
</div>

CSS Position list to bottom so last list item is visible

4 Answers4