使div位置绝对可滚动

I'm trying to make a chat HTML template. But I'm having some problems to make scrolleable the messages area.

我正在尝试制作聊天HTML模板。但我有一些问题要使可滚动的消息区域。

My structure is like this:

我的结构是这样的:

Chat header: to the top with the title of the chat or name person.
Chat input message: to the bottom you can write.
Chat visible area: total height - (chat header height + chat input message height).
Messages: Must increment it height but always be at the bottom of the chat visible area, to read the last message.

聊天标题:顶部带有聊天或姓名人的标题。聊天输入消息:你可以写到底部。聊天可见区域:总高度 - (聊天标题高度+聊天输入消息高度)。消息:必须增加高度,但始终位于聊天可见区域的底部,以读取最后一条消息。

All this structure lives with other html elements, is not fullscreen.

所有这些结构都与其他html元素一起使用,并非全屏。

My HTML structure is like this:

我的HTML结构是这样的:

<div id="chat-1" class="chat-ventana">
    <div class="chat-header">
        <h4>Header</h4>
    </div>
    <div class="chat-mensajes-contenedor">
        <div class="chat-mensajes-contenedor-general">
            <div class="mensaje-contenedor">
                <!-- messages content -->
            </div>
        </div>
    </div>
    <div class="chat-textarea">
        <textarea class="form-control" placeholder="Type your message"></textarea>
        <a href="#" class="mensaje-enviar"></a>
    </div>
</div>

And my CSS looks is this:

我的CSS看起来是这样的:

.chat-container {
  height: 70vh;
  min-height: 400px;
}

.chat-ventana {
  position: relative;
  display: inline-block;
  width: 65%;
  float: left;
}

.chat-ventana, .chat-mensajes-contenedor {
  height: 100%;
}

.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
  padding: 15px 15px 20px 15px;
}

.chat-header {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.chat-mensajes-contenedor {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 400px;
}

.chat-mensajes-contenedor-general {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.chat-ventana, .chat-mensajes-contenedor {
  height: 100%;
}

.chat-mensajes-contenedor {
  height: calc(100% - 46px);
}

.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
  padding: 66px 20px 25px 20px;
}

.chat-textarea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.chat-textarea .form-control {
  resize: none;
  height: 46px;
  padding: 10px 20px;
}

I see if I set .chat-mensajes-contenedor-general to position: relative; it becomes scrolleable but I can't position it to the bottom.

我看是否将.chat-mensajes-contenedor-general设置为position:relative;它变得可滚动但我不能将它放在底部。

2 个解决方案

#1

I think I get what you're after.

我想我得到了你想要的东西。

And it's probably obvious but since you didn't say we can't use javascript you can of course employ a little of it (using jQuery in the case below) to achieve the same end result:

它可能是显而易见的但是因为你没有说我们不能使用javascript你当然可以使用它(在下面的例子中使用jQuery)来实现相同的最终结果:

[JSFIDDLE]

function returnScrollHeight() {
    return this.scrollHeight;
}

$('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);

$('textarea.form-control').on('keyup', function (e) {
      if (e.ctrlKey && e.keyCode === 13) {
        $('.mensaje-contenedor').append('<div class="line">' + this.value + '</div>');

        $('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);

        this.value = '';
    }
});

I couldn't come up with a non-js solution in the brief time I tried. Hopefully someone else will come along and give the pure html/css answer.

在我尝试的短暂时间里,我无法想出非js解决方案。希望其他人会来并提供纯html / css答案。

#2

Here is a fiddle: https://jsfiddle.net/gLahjk5z/3/

这是一个小提琴:https://jsfiddle.net/gLahjk5z/3/

I changed the position styles to position: relative and altered some of your height elements.

我将位置样式更改为position:relative并更改了一些高度元素。

I then added this Jquery function to run on document ready:

然后我添加了这个Jquery函数来运行文档就绪:

$(document).ready(function() {
    var bottom = $(".mensaje-contenedor").height();
    $(".chat-mensajes-contenedor").scrollTop(bottom);
})

To make messages always appear at the bottom use this CSS:

要使消息始终显示在底部,请使用此CSS:

.chat-mensajes-contenedor-general {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mensaje-contenedor {
    align-self: flex-end;
}

#1