Question

我正在制作一个简单的消息应用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>

SASS

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的底部。

我已经尝试弄乱父母和子女的位置属性，并试图让垂直对齐工作，但到目前为止我还没有让它发挥作用。

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

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

Answer 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>

Answer 2

您友好的社区Flexbox解决方案：

在容器上，您还可以使用justify-content属性将其内容与底部对齐：

.conversation-area {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

点击此处了解有关flexbox的更多信息：http://www.flexboxin5.com

如何制作一堆坚持父div底部的div？

2 个答案: