html - 如何制作一叠固定在其父div底部的div？

我正在制作一个简单的消息传递应用程序UI。我正在尝试使消息像大多数现代消息传递应用程序一样锚定在屏幕底部。到目前为止，这是我的消息传递UI的基本内容：


  的HTML

<div class="main-wrapper">
  <div class="contact-list">
    contacts here
  </div>
  <div class="conversation-area">
    <div class="msg msg-them">this is Alison</div>
    <div class="msg msg-me">this is me!</div>
    <div class="msg msg-them">you are so cool! :)</div>
    <div class="msg msg-them">seriously.</div>
  </div>
</div>

  萨斯

body, html {
    height: 100%;
}

.main-wrapper {
    height: 100%;
    margin: 0px auto;
    overflow: hidden;
  .contact-list{
        float: left;
        width: 200px;
        height: 100%;
        background-color: #aaa;
        border-right: 2px solid #777;
  }
  .conversation-area{
      overflow: hidden;
      height: 100%;
      background-color: #ccc;

      .msg{
        vertical-align: bottom;
        border: 1px solid black;
        &-them{
          background-color: blue;
          float: left;
          max-width: 250px;
          display: inline;
          clear: both;
        }

        &-me{
          background-color: red;
          float: right;
          max-width: 250px;
          display: inline;
          clear: both;
        }
      }
    }
  }

每当收到新消息时，我都会将其插入为.conversation-area div的最后一个子项。我有想要我堆叠的消息。我只需要使它们粘在.conversation-area div的底部即可。

我试过弄乱父级和子级div的位置属性，并尝试使垂直对齐正常工作，但是到目前为止，我还没有使它起作用。

除了将消息粘贴在底部而不是顶部之外，如何使我的消息传递应用程序看起来完全相同？

这是jsFiddle：https://jsfiddle.net/63vufn7u/1/

最佳答案

您可以使用display:table-cell;和vertical-align:bottom;

我对您的代码进行了一些更改，但是我确定您现在可以适应其工作：

.main-wrapper {
  width: 100%;
  height: 200px;
  font-family:sans-serif;
}
.contact-list {
  width:25%;
  display: table-cell;
  height: 200px;
  background: #555;
  color: #fff;
  text-align: center;
  float: left;
}
#conversation-area {
  height: 200px;
  width: 300px;
  background: steelblue;
  display: table-cell;
  vertical-align: bottom;
}

.msg {
  display: block;
  margin: 15px 10px;
}
.msg p {
  border-radius:5px 5px 5px 5px;
  background: #fff;
  display: inline;
  padding: 5px 10px;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}

.msg-me {
  text-align: left;
}

.msg-me p {
  border-radius:15px 15px 15px 0px;
}

.msg-them {
  text-align: right;
}

.msg-them p {
  border-radius:15px 15px 0px 15px;
}

<div class="main-wrapper">
  <div class="contact-list">
    Contacts
  </div>
  <div id="conversation-area">
  <div class="msg msg-them"><p>this is Alison</p></div>
    <div class="msg msg-me"><p>this is me!</p></div>
    <div class="msg msg-them"><p>you are so cool! :)</p></div>
    <div class="msg msg-them"><p>seriously.</p></div>
  </div>
</div>

关于html - 如何制作一叠固定在其父div底部的div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41155624/