외부 Div의 크기가 조정될 때 CSS를 사용하여 스크롤 가능한 Div를 하단에 고정하려면 어떻게 해야 합니까?

외부 div의 크기가 변경될 때 스크롤 가능한 div가 하단에 고정됨

많은 채팅 애플리케이션이 하단으로 스크롤됩니다. 입력 크기가 조정되어 사용자가 계속해서 최신 메시지를 볼 수 있습니다.

이를 React로 구현하는 전통적인 방법은 다음과 같습니다. componentDidUpdate는 입력이 변경될 때마다 입력 높이를 다시 계산하고 이에 따라 메시지 컨테이너를 업데이트합니다.

그러나 이로 인해 성능 문제가 발생할 수 있으며 이와 같이 메시지를 전달하는 것은 이상적이지 않습니다.

CSS를 사용하여 이를 구현하는 더 좋은 방법이 있습니까?

이것의 두 번째 개정판 대답

flex-direction: 열-역방향; 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 사용의 한 가지 단점: 열 역방향; 스크롤바가 표시되지 않는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!