滚动窗口没有单独滚动，并且高度在Html/Css/Javascript中没有固定在屏幕上？

Question

它们是两个窗口，一个是联系人，另一个是消息区域，底部是textarea（消息打字区域）。

1）如何在屏幕上固定联系人和消息区域的高度，并分别滚动？

2）如何使textarea恰好位于消息区域的底部（现在它出现在接触区域的底部）？

HTML

<div class="container bootstrap snippet"> 
    <div class="tile tile-alt" id="messages-main"> 
     <div class="ms-menu"> 
      <div class="ms-user clearfix"> 
       <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar pull-left"> 
       <div>Signed in as <br> m-hollaway@gmail.com</div> 
      </div> 


      <div class="list-group lg-alt" id="scrollContact"> 

       <a class="list-group-item media" href=""> 
        <div class="pull-left"> 
         <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-avatar"> 
        </div> 
        <div class="media-body"> 
         <div class="list-group-item-heading">Davil Parnell</div> 
        </div> 
       </a> 

       <a class="list-group-item media" href=""> 
        <div class="pull-left"> 
         <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-avatar"> 
        </div> 
        <div class="media-body"> 
         <div class="list-group-item-heading">Ann Watkinson</div> 
        </div> 
       </a> 

       <a class="list-group-item media" href=""> 
        <div class="pull-left"> 
         <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-avatar"> 
        </div> 
        <div class="media-body"> 
         <div class="list-group-item-heading">Marse Walter</div> 
        </div> 
       </a> 

      </div> 


     </div> 

     <div class="ms-body"> 
      <div class="action-header clearfix"> 
       <div class="visible-xs" id="ms-menu-trigger"> 
        <i class="fa fa-bars"></i> 
       </div> 

       <div class="pull-left hidden-xs"> 
        <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-avatar m-r-10"> 
        <div class="lv-avatar pull-left"> 

        </div> 
        <span>David Parbell</span> 
       </div> 

       <ul class="ah-actions actions"> 

        <li class="dropdown"> 
         <a href="" data-toggle="dropdown" aria-expanded="true"> 
          <i class="fa fa-sort"></i> 
         </a> 

         <ul class="dropdown-menu dropdown-menu-right"> 
          <li> 
           <a href="">Latest</a> 
          </li> 
          <li> 
           <a href="">Oldest</a> 
          </li> 
         </ul> 
        </li>        
        <li class="dropdown"> 
         <a href="" data-toggle="dropdown" aria-expanded="true"> 
          <i class="fa fa-bars"></i> 
         </a> 

         <ul class="dropdown-menu dropdown-menu-right"> 
          <li> 
           <a href="">Delete</a> 
          </li> 
          <li> 
           <a href="">Block Messages</a> 
          </li> 
          <li> 
           <a href="">Report as Spam</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 

    <div id="scrollMessage"> 

      <div class="message-feed media"> 
       <div class="pull-left"> 
        <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar"> 
       </div> 
       <div class="media-body"> 
        <div class="mf-content"> 
         Quisque 
        </div> 
        <small class="mf-date"><i class="fa fa-clock-o"></i> 20/02/2015 at 09:00</small> 
       </div> 
      </div> 
      <div class="message-feed media"> 
       <div class="pull-left"> 
        <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-avatar"> 
       </div> 
       <div class="media-body"> 
        <div class="mf-content"> 
         Quisque 
        </div> 
        <small class="mf-date"><i class="fa fa-clock-o"></i> 20/02/2015 at 09:00</small> 
       </div> 
      </div> 

      </div> 

     <div class="msb-reply clearfix"> 
     <div class="col-xs-12"> 
              <textarea placeholder="What's on your mind..."></textarea> 
              <button id="button3" title="Send"><i class="fa fa-paper-plane-o"></i></button> 
             </div> 
             <div class="col-xs-8"> 
              <button id="button1" title="Add File's"><i class="fa fa-file"></i></button> 
              <button id="button2" title="Add Photo's"><i class="fa fa-camera"></i></button> 
             </div> 



      </div> 
     </div> 
    </div> 
    </div> 

CSS

body { 
    font-family: Roboto,sans-serif; 
    font-size: 13px; 
    line-height: 1.42857143; 
    color: #767676; 
    background-color: #edecec; 
    width:100%; 
} 

.container{ 
    width:100%; 
} 

#scrollContact { 
    height: auto; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    background-color:#eee; 
} 

#scrollMessage { 
    height: auto; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

#messages-main { 
    position: relative; 
    margin: 0 auto; 
} 
#messages-main:after, #messages-main:before { 
    content: " "; 
    display: table; 
} 
#messages-main .ms-menu { 
    position: absolute; 
    left: 0; 
    top: 0; 
    border-right: 1px solid #eee; 
    padding-bottom: 50px; 
    height: 100%; 
    width: 240px; 
} 
@media (min-width:768px) { 
    #messages-main .ms-body { 
    padding-left: 240px; 
} 
}@media (max-width:767px) { 
    #messages-main .ms-menu { 
    height: calc(100% - 58px); 
    display: none; 
    z-index: 1; 
    top: 58px; 
} 
#messages-main .ms-menu.toggled { 
    display: block; 
} 
#messages-main .ms-body { 
    overflow: hidden; 
} 
} 
#messages-main .ms-user { 
    padding: 15px; 
    background: #f8f8f8; 
} 
#messages-main .ms-user>div { 
    overflow: hidden; 
    padding: 10px 5px 0 15px; 
    font-size: 11px; 
} 

#messages-main #ms-compose { 
    position: fixed; 
    bottom: 120px; 
    z-index: 1; 
    right: 30px; 
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); 
} 
#ms-menu-trigger { 
    user-select: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 50px; 
    height: 100%; 
    padding-right: 10px; 
    padding-top: 19px; 
} 
#ms-menu-trigger i { 
    font-size: 21px; 
} 
#ms-menu-trigger.toggled i:before { 
    content: '\f2ea' 
} 
.fc-toolbar:before, .login-content:after { 
    content: "" 
} 
.message-feed { 
    padding: 20px; 
} 
#footer, .fc-toolbar .ui-button, .fileinput .thumbnail, .four-zero, .four-zero footer>a, .ie-warning, .login-content, .login-navigation, .pt-inner, .pt-inner .pti-footer>a { 
    text-align: center; 
} 
.message-feed.right>.pull-right { 
    margin-left: 15px; 
} 
.message-feed:not(.right) .mf-content { 
    background: #03a9f4; 
    color: #fff; 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); 
} 
.message-feed.right .mf-content { 
    background: #eee; 
} 
.mf-content { 
    padding: 12px 17px 13px; 
    border-radius: 2px; 
    display: inline-block; 
    max-width: 80%; 
} 
.mf-date { 
    display: block; 
    color: #B3B3B3; 
    margin-top: 7px; 
} 
.mf-date>i { 
    font-size: 14px; 
    line-height: 100%; 
    position: relative; 
    top: 1px; 
} 
.msb-reply { 
    position: fixed; 
    bottom: 0px; 
    right:0px; 
    width:100%; 
    margin-top: 0px; 
    border-top: 1px solid #eee; 
    background: #f8f8f8; 
} 
.four-zero, .lc-block { 
    box-shadow: 0 1px 11px rgba(0, 0, 0, .27); 
} 
.msb-reply textarea { 
    width: 100%; 
    font-size: 13px; 
    border: 0; 
    padding: 10px 15px; 
    resize: none; 
    height: 60px; 
    background: 0 0; 
} 
#button1 { 
    position: relative; 
    top: 0; 
    right: 0; 
    border: 0; 
    height: 100%; 
    width: 40px; 
    font-size: 20px; 
    color: #2196f3; 
    background: 0 0; 
} 

#button2 { 
    position: relative; 
    top: 0; 
    right: 0; 
    border: 0; 
    height: 100%; 
    width: 40px; 
    font-size: 20px; 
    color: #2196f3; 
    background: 0 0; 
} 

#button3 { 
    position: absolute; 
    top: 0; 
    right: 0; 
    border: 0; 
    height: 100%; 
    width: 60px; 
    font-size: 25px; 
    color: #2196f3; 
    background: 0 0; 
} 
#button3:hover { 
    background: #f2f2f2; 
} 

.img-avatar { 
    height: 37px; 
    border-radius: 2px; 
    width: 37px; 
} 
.list-group.lg-alt .list-group-item { 
    border: 0; 
} 
.p-15 { 
    padding: 15px!important; 
} 
.btn:not(.btn-alt) { 
    border: 0; 
} 
.action-header { 
    position: relative; 
    background: #f8f8f8; 
    padding: 15px 13px 15px 17px; 
} 
.ah-actions { 
    z-index: 3; 
    float: right; 
    margin-top: 7px; 
    position: relative; 
} 
.actions { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.actions>li { 
    display: inline-block; 
} 

.actions:not(.a-alt)>li>a>i { 
    color: #939393; 
} 
.actions>li>a>i { 
    font-size: 20px; 
} 
.actions>li>a { 
    display: block; 
    padding: 0 10px; 
} 
.ms-body{ 
    background:#fff;  
} 
#ms-menu-trigger { 
    user-select: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 50px; 
    height: 100%; 
    padding-right: 10px; 
    padding-top: 19px; 
    cursor:pointer; 
} 
#ms-menu-trigger, .message-feed.right { 
    text-align: right; 
} 
#ms-menu-trigger, .toggle-switch { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
} 

的jsfiddle： -https://jsfiddle.net/apf5bjeL/

Answer 1

我认为你必须解决，而不是高度自动的：

#scrollContact { 
    height: 200px; 
    overflow-y: scroll; 
    overflow-x: scroll; 
    background-color:#eee; 
} 

#scrollMessage { 
    height: 200px; 
    overflow-y: scroll; 
    overflow-x: scroll; 
}