如何使用div只使用材料2类而不使用css来垂直填充屏幕?

时间:2017-07-25 06:39:50

标签: html angular angular-material

我使用角度4及其各自的材质。我的app.component.html看起来像这样:

<!--The whole content below can be removed with the new code.-->
<md-toolbar color="primary" >
    <button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-
24|md-36|md-48">menu</md-icon></button>
    <span>Material 2</span>
    <span class="example-spacer"></span>
</md-toolbar>


<md-sidenav-container layout="column" flex style="background: plum;">

    <md-sidenav #sidenav side="left" class="example-sidenav" flex layout="column" style="background: plum;">
    <md-list>
    <div class="row">
        <md-list-item><md-icon>explore</md-icon> <span>item</span></md-list-item>
    </div>

    <div class="row">
    <md-list-item><md-icon>map</md-icon> <span>item</span></md-list-item>
    </div>

    <div class="row">    
    <md-list-item><md-icon>home</md-icon> <span>item</span></md-list-item>
    </div>

    <div class="row">
    <md-list-item><md-icon>android</md-icon> <span>item</span></md-list-item>
    </div>

    <div class="row">
    <md-list-item><md-icon>done</md-icon> <span>item</span></md-list-item>
    </div>

    </md-list>
    </md-sidenav>


    <md-grid-list cols="4" rowHeight="100px" layout="column" flex>

    </md-grid-list>

</md-sidenav-container>
`

The divs expand vertically only till the point they have data defined.

如何让md-sidenav-container占据垂直留下的所有空间?

Plunkr:https://plnkr.co/edit/Mvm6zSifW0EpeKtmuSEA?p=preview

注意:我不想要CSS最小高度,高度:100%修复。 Angular Material 2/4只有基于干净的类/指令的解决方案。

1 个答案:

答案 0 :(得分:2)

将您的 <?php $ll = 'LLL:EXT:myext/Resources/Private/Language/locallang_db.xlf:'; return [ 'ctrl' => [ 'title' => $ll . 'document', 'label' => 'item_id', 'tstamp' => 'updated_at', 'crdate' => 'created_at', ], 'interface' => [ 'showRecordFieldList' => '' ], 'columns' => [ 'pid' => [ 'label' => $ll . 'pid', 'config' => [ 'type' => 'passthrough', ] ], // ... 'item_id' => [ 'label' => $ll . 'item.id', 'config' => [ 'type' => 'input', 'size' => '10', 'eval' => 'int', ], ], ], ]; 移到容器中,并将<md-toolbar>属性添加到fullscreen

<md-sidenav-container>

有关详细信息,请参阅this answer

Updated plunker