Bagaimanakah Saya Boleh Membuat Div Boleh Tatal Melekat ke Bawah Menggunakan CSS Apabila Div Luar Mengubah Saiz?

Div boleh tatal untuk melekat ke bawah, apabila div luar berubah saiz

Sebilangan aplikasi sembang tatal ke bawah, walaupun semasa input diubah saiz, sekali gus membolehkan pengguna untuk terus melihat mesej terkini.

Cara tradisional untuk melaksanakan ini dengan React adalah menggunakan componentDidUpdate, untuk mengira semula ketinggian input setiap kali ia berubah dan mengemas kini bekas mesej dengan sewajarnya.

Walau bagaimanapun, ini boleh menyebabkan masalah prestasi dan tidak sesuai untuk menghantar mesej seperti ini.

Adakah terdapat cara yang lebih baik untuk melaksanakan ini menggunakan CSS?

Semakan kedua ini jawapan

arah lentur: lajur-terbalik; akan menjajarkan mesej di bahagian bawah bekas mesej, sama seperti yang dilakukan oleh Skype dan banyak apl sembang lain.

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

Satu kelemahan untuk menggunakan arah-flex: lajur-terbalik; ialah pepijat dalam IE/Edge/Firefox, di mana bar skrol tidak dipaparkan.

Untuk membetulkannya, kita boleh menggunakan fungsi berikut:

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

Dan kemudian tambahkannya pada kami kod seperti itu:

/* 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 */

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Boleh Tatal Melekat ke Bawah Menggunakan CSS Apabila Div Luar Mengubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!