divで位置を絶対スクロール可能にする

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

私はposition: relative;に.chat-mensajes-contenedor-generalを設定した場合、それはscrolleableなるが、私見ますそれを底に置くことはできません。

Answer 1

私はあなたが何をしているのか分かります。

そして、あなたは私たちは、あなたが、もちろん同じ最終結果を達成するために（下記の場合にはjQueryを使用して）それの少しを採用することができるのJavaScriptを使用することはできませんと言っていなかったので、それはおそらく明白だが：

[ 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; 
}