外側の Div のサイズが変更されたときに、CSS を使用してスクロール可能な Div を一番下に固定するにはどうすればよいですか?

外側の div のサイズが変更された場合、スクロール可能な div が一番下に固定されます

多くのチャット アプリケーションは、たとえ入力のサイズが変更されるため、ユーザーは引き続き最新のメッセージを表示できます。

React でこれを実装する従来の方法では、次のようになります。変更されるたびに入力の高さを再計算し、それに応じてメッセージ コンテナを更新するには、componentDidUpdate を使用する必要があります。

ただし、これはパフォーマンスの問題を引き起こす可能性があり、このようにメッセージを渡さなければならないのは理想的ではありません。

CSS を使用してこれを実装するより良い方法はありますか?

この第 2 改訂版答え

フレックス方向: 列反転; Skype や他の多くのチャット アプリと同じように、メッセージはメッセージ コンテナの下部に配置されます。

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chat-input {
  border-top: 1px solid #999;
  padding: 20px 5px;
}

.chat-input-text {
  width: 60%;
  min-height: 40px;
  max-width: 60%;
}

flex-direction を使用する場合の欠点の 1 つは、column-reverse; です。これは IE/Edge/Firefox のバグで、スクロールバーが表示されません。

これを修正するには、次の関数を使用できます:

// scroll to bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// only shift-up if at bottom
function scrollAtBottom(el) {
  return el.scrollTop + 5 >= el.scrollHeight - el.offsetHeight;
}

そして、それらを次のようなコード:

/* fix for IE/Edge/Firefox */
var isWebkit = ('WebkitAppearance' in document.documentElement.style);
var isEdge = ('-ms-accelerator' in document.documentElement.style);
var tempCounter = 6;

function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

function scrollAtBottom(el) {
  return el.scrollTop + 5 >= el.scrollHeight - el.offsetHeight;
}

/* temp. buttons for demo */
button {
  width: 12%;
  height: 44px;
  margin-left: 5%;
  vertical-align: top;
}

/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text {
  overflow: auto;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .chat-messages-text {
    overflow: visible;
  }
  /*  reset Edge as it identifies itself as webkit  */
  @supports (-ms-accelerator:true) {
    .chat-messages-text {
      overflow: auto;
    }
  }
}

/* hide resize FF */
@-moz-document url-prefix() {
  .chat-input-text {
    resize: none;
  }
}

/* end - fix for hidden scrollbar in IE/Edge/Firefox */

以上が外側の Div のサイズが変更されたときに、CSS を使用してスクロール可能な Div を一番下に固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。