Question

如何垂直填充列。我目前有这个应用程序。

我想垂直展开垂直项目以占用页面的其余部分。我已经尝试了几个小时阅读文件和查看其他帖子，但我不知道出了什么问题。我刚开始使用棱角分明的材料，而且我对弹性盒的概念不熟悉。

这是我的代码。

<body ng-cloak layout="column" ng-app="app">
<div layout="row" flex>

    <md-sidenav layout="column" md-component-id="left" class="md-whiteframe-1dp" md-is-locked-open="true">
        <md-list>
            <md-list-item>
                <md-button ng-click="">
                    <md-icon md-font-set="material-icons">face</md-icon>
                    Alex
                </md-button>
            </md-list-item>
            <md-list-item>
                <md-button ng-click="">
                    <md-icon md-font-set="material-icons">face</md-icon>
                    Tara
                </md-button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <md-content flex id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi at consequuntur doloremque
            dolores
            dolorum eaque, exercitationem expedita facere fugiat ipsam nemo possimus quod recusandae repellendus, saepe
            sequi
            vitae, voluptas!
        </p>
    </md-content>

</div>

Code Pen Example

我只是注意到父div .app-wrapper会导致问题，但我想保留它。

Answer 1

您正在寻找viewport height。在您的情况下，您可以通过课程申请md-sidenav：

.full-height{
    height: 100vh;
}

角度材料设计如何垂直填充列

1 个答案: