css 如何创建一个div堆栈，使其粘在父div的底部？

fkvaft9z 于 2023-02-06 发布在其他

关注(0)|答案(3)|浏览(199)

我正在做一个简单的消息应用程序用户界面。我试图像大多数现代消息应用程序一样，将消息锚在屏幕底部。到目前为止，我的消息用户界面大致如下：
超文本标记语言

<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的底部。
我尝试过修改父div和子div的位置属性，也尝试过使垂直对齐工作，但到目前为止，我还没有让它正常工作。
我怎样才能让我的消息应用程序看起来完全一样，除了消息粘在底部而不是顶部？
下面是jsFiddle：https://jsfiddle.net/63vufn7u/1/

css

来源：https://stackoverflow.com/questions/41155624/how-do-i-make-a-stack-of-divs-that-stick-to-the-bottom-of-their-parent-div

3条答案

按热度按时间

w1e3prcc1#

您可以使用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>

赞(0）回复(0）举报 2023-02-06

ee7vknir2#

您友好的Flexbox解决方案：
在容器上，还可以使用justify-content属性将其内容与底部对齐：

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

了解更多关于Flexbox的信息：http://www.flexboxin5.com

赞(0）回复(0）举报 2023-02-06

nbewdwxp3#

我发现最简单的方法是使用flex-direction: column-reverse;。
flex-direction: column;的缺点是它从顶部开始，你必须向下滚动才能看到较旧的文本，而这并不是聊天应用程序界面的工作方式。
column-reverse使文本粘在底部。权衡是你必须以时间戳升序插入消息，而不是像通常那样反向插入，因为flex-box在css中做反向操作。任何动画也是如此。所以新的文本气泡动画将应用于:first child而不是:last child。
下面是一个没有动画的示例：https://jsfiddle.net/ut1Lybsj/1/

<style>
  .container {
    height: 200px;
    width: 200px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
    border: 1px solid black;
  }
  
  .container div {
    margin-top: 20px;
  }
</style>

<div class="container">
<div style="background:red;">First Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
  
<div style="background: skyblue;">Second Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>

<div style="background: green;">Third Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>

</div>

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何创建一个div堆栈，使其粘在父div的底部？

3条答案

相关问题

热门标签

最新问答