滚动窗口没有'；t单独滚动，高度在Html/Css/Javascript屏幕上不固定？

他们有两个窗口，一个是联系人，另一个是消息区，底部是文本区（消息键入区）

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

2）如何将文本区域刚好放在消息区域的底部（现在它位于联系人区域的底部）？

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>

---

jshiddle:-

我认为你必须固定高度，而不是自动：

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

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

---

将外侧的最大高度添加到滚动部分是的，它正在工作，但这是另一个问题，当一侧的高度增加时，另一侧的高度也随之增加，为什么？它们在一个滚动条上滚动，而不是单独滚动，在主滚动条上滚动，而它们有单独的滚动条，但不工作？

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

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