如何製作粘貼到其父部分底部的div的堆棧？

我正在製作一個簡單的消息應用UI。我試圖讓消息像大多數現代消息應用程序一樣錨定在屏幕的底部。到目前爲止，這是我的短信UI的梗概：如何製作粘貼到其父部分底部的div的堆棧？

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

我試過弄亂父母和子div的位置屬性，以及試圖讓垂直對齊工作，但到目前爲止我還沒有得到它的功能。

如何讓我的消息應用程序看起來完全相同除了消息粘貼到底部而非頂部？

這裏的的jsfiddle：https://jsfiddle.net/63vufn7u/1/

來源

2016-12-15 jros

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

來源

2016-12-15 03:28:58 Brad

的jsfiddle版本：https：//開頭jsfiddle.net/63vufn7u/4/ – Brad

我很好奇，因爲我在看同樣的方法有沒有辦法像以前一樣使用基於百分比的佈局的這種方法（沒有固定的高度定義）？不錯的解決方案，但我喜歡這是唯一讓我失望的造型。 – Adrian

這裏是一個完整的高度版本：https：//jsfiddle.net/63vufn7u/5/ – Brad

您的友好鄰居Flex現成的解決方案：

在容器中，你也可以使用justify-content屬性來對齊其內容的底部：

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

進一步瞭解Flexbox，就在這裏：http://www.flexboxin5.com

來源

2016-12-15 03:55:27 mikefortuna

如何製作粘貼到其父部分底部的div的堆棧？

回答

相關問題