divのスタックを親divの一番下に貼り付けるにはどうすればよいですか？

Question

私は単純なメッセージングアプリの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; 
     } 
     } 
    } 
    } 

新しいメッセージが到着するたびに、私は」：これまでのところ、ここに私のメッセージングUIの裸の骨がありますそれを.conversation-area divの最後の子として挿入します。私はそれらが欲しいのと同じようにメッセージを積み重ねています。私はそれらを.conversation-area divの下に固執する必要があります。

私は、親と子の両方の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

フレンドリーな近所ボックス・ソリューション：

コンテナで、あなたはまた、下に内容だ整列するjustify-contentプロパティを使用できます。

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

はここにフレキシボックスの詳細情報：http://www.flexboxin5.com