How to vertically fill the screen with a div while using only material 2 classes and without using css?

Question

I am using angular 4 with its respective Material . My app.component.html looks like this :

<!--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>
`

How to make the md-sidenav-container take up all of the space left vertically?

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

Note: I don't want a CSS min-height, height: 100% fix. Only a clean class/directive based solution for Angular Material 2/4.

Why do you not want a css solution? That would be the correct way to do this I believe - what is not "clean" about it? — 0mpurdy, Jul 25 '17 at 07:35
@0mpurdy, it isn't. there are classes (notably: layout, flex) for this in the framework already. Adding your own just complicates things. — Rick van Lieshout, Jul 25 '17 at 07:37
@AakashUniyal, the plunker seems to do exactly what you ask for? it fills the entire height of the document? — Rick van Lieshout, Jul 25 '17 at 07:38
@RickvanLieshout It is not filling the screen in the plunker for me [screen shot of behaviour](http://i.imgur.com/vtBtr1R.png) — 0mpurdy, Jul 25 '17 at 07:41

score 3 · Accepted Answer · answered Jul 25 '17 at 07:49

3

Move your <md-toolbar> inside the container and add the fullscreen attribute to the <md-sidenav-container>:

<md-sidenav-container layout="column" flex style="background: plum;" fullscreen>
  <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>Hems IRCA</span>
      <span class="example-spacer"></span>
  </md-toolbar>

...

See this answer for more details

Updated plunker

answered Jul 25 '17 at 07:49

0mpurdy

3,198
1
19
28

Thanks for the answer , fullscreen attribute works well . But i also dont want toolbar to be hidden by the sidenav bar , previously the sidenav bar was below the toolbar . If there is any other way to leverage the fullscreen attribute without hindering the toolbar and sidenav bar structure as mentioned before – Aakash Uniyal Jul 25 '17 at 09:44
I'm not sure how you would do that but you could try the `mode="push"` attribute on the `` – 0mpurdy Jul 25 '17 at 10:01

How to vertically fill the screen with a div while using only material 2 classes and without using css?

1 Answers1