Question

我正在尝试制作聊天HTML模板。但是我在制作可滚动消息区域方面遇到了一些问题。

我的结构是这样的：

聊天标题：使用聊天或姓名人的标题到顶部 聊天输入消息：您可以写到底部 聊天可见区域：总高度 - （聊天标题高度+聊天输入消息高度） 消息：必须递增高度，但始终位于聊天可见区域的底部，以便阅读最后一条消息。

所有这些结构都与其他html元素一起使用，不是全屏。

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

我的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;
}

我看是否将.chat-mensajes-contenedor-general设置为position: relative;它变为可滚动但我无法将其置于底部。

Answer 1

我想我得到的是你所追求的。

它可能很明显但是因为你没有说我们不能使用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 = '';
    }
});

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

Answer 2

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

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

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

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

要使消息始终显示在底部，请使用此CSS：

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

使div位置绝对可滚动

2 个答案: