Html 使用Boostrap 4和Ember的响应性视图，如Whatsapp web

我正在尝试实现Whatsapp类似web的UI。 我使用的是Bootstrap4和Ember 3.2。 这个基本想法现在正在发挥作用。我已经完成了视图底部的消息框（使用固定底部引导类）。我有一个消息列表，它使用jQuery inside list container自定义组件自动向下滚动，如：

export default Component.extend({
    didRender() {
        this.$().parents('html, body').scrollTop(this.$(document).height()); // Scroll immediately
    }
});

在这里，我为列表设置了边距：

    <div id="ember390" class="ember-view">
    <div class="container-fluid pt-5" style="border: 1px solid red;margin-bottom: 32vh;">
            <div class="d-flex flex-column">
                <div class="p-2">
                    1
                </div>
                <div class="p-2">
.......

1.
.......

我正在添加边距底部：32hv，这将“提升”消息输入框上的消息列表。此解决方案适用于全高清屏幕。 一旦我在小型显示器上尝试相同的视图，页边距底部：32hv是不够的，因为引导响应

我有一个解决方案，但不确定它是否正确。 我可以根据窗口大小和消息框容器计算边距底部的值

这只是一种方法，还是我可以用纯CSS做同样的事情

另一个问题是将jQuery与Ember.js一起使用，因此我无法访问消息列表容器组件中的消息输入容器

---

下面是一个例子，如果你正在做一个底部有聊天功能的聊天应用，就像我正在做的一样，我认为flexbox可能更适合你

基本上，这可以用纯css来完成！：）

以下是我的工作：

chat/template.hbs

<div class='flex-grow flex-column align-items-stretch chat-container'>

  {{outlet}}

</div>

---

我不熟悉whatsapp，是聊天吗？我的工作是，这是一个聊天，它使用flexbox类来实现固定到底部的聊天条目。这是类似的行为吗？我没有使用边距底部：一些数字，而是使用flexbox。让我看看我是否能总结一个例子。你做得真的很好！聊天应用看起来棒极了！不幸的是，它的工作方式不同，这是我需要做的。聊天记录与聊天记录是粘在一起的。一旦我填写了聊天记录，聊天记录就会隐藏在滚动条上。我的任务是让聊天记录位于同一位置。但是我会尝试使用flexboxyou’你想让你的聊天记录始终可见吗？还是在滚动时隐藏？（我想我的会留在屏幕上，即使聊天记录很大）是的，我想把*ChatEntry*一直放在屏幕的底部。我就是这么做的：）我想我找到了快速而肮脏的解决方案。我刚刚在列表后面添加了4个

元素。Bootstrap以相同的方式“计算”所有元素的响应值，因此p-5类增加了相同的裕度。这仍然不是最好的解决方案：(

<ChatHistory class='flex-grow flex-column' @messages={{messages}}/>

<ChatEntry class='p-l-md p-r-md' @to={{model.targetIdentity}} />

@mixin flexUtils($modifier) {
  .flex-row#{$modifier} {
    display: flex !important;
    flex-direction: row;
  }

  .flex-column#{$modifier} {
    display: flex !important;
    flex-direction: column;
  }

  .flex-wrap#{$modifier} { flex-wrap: wrap; }
  .flex-grow#{$modifier} { flex-grow: 1; }
  .flex#{$modifier} { display: flex; }

  @for $i from 0 through 20 {
    .flex-width-#{$i * 5}#{$modifier} {
      flex-basis: #{$i * 5%};
    }
  }


  .align-items-start#{$modifier} { align-items: flex-start; }
  .align-items-end#{$modifier} { align-items: flex-end; }
  .align-items-center#{$modifier} { align-items: center; }
  .align-items-stretch#{$modifier} { align-items: stretch; }
  .align-items-baseline#{$modifier} { align-items: baseline; }
  .justify-content-start#{$modifier} { justify-content: flex-start; }
  .justify-content-end#{$modifier} { justify-content: flex-end; }
  .justify-content-center#{$modifier} { justify-content: center; }
  .justify-content-space-between#{$modifier} { justify-content: space-between; }
  .justify-content-space-around#{$modifier} { justify-content: space-around; }
  .justify-content-space-evenly#{$modifier} { justify-content: space-evenly; }
}



@include mobile {
  @include flexUtils('-mobile');
}

@include tablet {
  @include flexUtils('-tablet');
}

@include desktop {
  @include flexUtils('-desktop');
}

@include flexUtils('');