角度材料将全高度柱分成两行，百分比高度

Question

我正在尝试创建一个聊天界面，但我是角色素材的新手，这个项目是基于它的，所以我想遵循它的惯例，这就是我到目前为止所得到的： 我想.messages_wrap区域占窗口高度的85％，而.input_wrap占15％。

<!--<div style="width:100%" layout="row">-->
    <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="true">
        <md-toolbar layout="row" class="md-whiteframe-z1 chat-title">
            <h3 >Groups</h3>                    
        </md-toolbar>
        <div layout="column" style="">          
            <md-list class="list-groups">
                <md-list-item ng-repeat="it in groups">                
                    <md-button ng-click="selectGroup(it, $index)" ng-class="{'selected' : it === selectedGroup }" >
                        {{it.name}}
                    </md-button>         
                </md-list-item>
            </md-list>    
        </div>
        <md-toolbar layout="row" class="md-whiteframe-z1 chat-title" >
            <h3 >Users</h3>
        </md-toolbar>
        <div layout="column" style="">          
            <md-list class="list-users">
                <md-list-item ng-repeat="it in users">                
                    <md-button ng-click="selectUser(it, $index)" ng-class="{'selected' : it === selectedUser }" >
                        {{it.name}}
                    </md-button>         
                </md-list-item>
            </md-list>    
        </div>
    </md-sidenav>
    <div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2"  >        
        <div class="messages_wrap" layout="vertical" layout-fill  >
            <md-list > 
                <md-list-item ng-repeat="it in messages"  >
                    <div class="message" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'mine' : it.author_id === user.id }">
                        <div class="message-author">{{it.author}}</div>               
                        <div class="message-content">{{it.content}}</div>
                    </div>   
                    <!--<pre>
                    <code class="language-php" prism>    -->
                    <div hljs>
                    <?php
                    echo "<h2>PHP is Fun!</h2>";
                    echo "Hello world!<br>";
                    echo "I'm about to learn PHP!<br>";
                    echo "This ", "string ", "was ", "made ", "with multiple parameters.";
                    ?>
                    </div>
                    <!--</code>
                    </pre>-->                        
                </md-list-item>
            </md-list>    
        </div>
        <div class="input_wrap">
            <md-input-container layout="row" layout-align="center end">
                <label>Your message:</label>
                <textarea ng-model="currentMessage"></textarea>    
            </md-input-container>
            <md-input-container>
                <md-button class="md-raised md-info" ng-click="postMessage()">Submit</md-button>
            </md-input-container>               
        </div> 
    </div>
<!--</div>-->