Angular Material tab height

Question

I am trying to have a full page Angular Material tab which has tabs which are full height and have a centered message. I have created this stakblitz as I can\'t get it to work.

Answer 1

In order to fill the page, the page needs to fill the window:

styles.css

body, html{
  height: 100%;
  margin: 0;
}

The app component needs to fill the body:

app.component.css

:host{
  box-sizing: border-box;
  display: block;
  height: 100%;
}

By default the wrappers of the content within the tabs are not filling the tab's height so we will fix this:

styles.css

.mat-tab-body-wrapper{
  flex-grow: 1;
}

We also need to have the mat-tab-group fill the height, its parent needs to fill the height too, so we will give an id to both the wrapper and the tab-group.

app.component.html

 
    

        

            
Fun Sidebar
        
        

             
                
                    

                        
Hello
                        
Lorem ipsulem
                    
                
                
                    
                
            
        
    

app.component.css

#wrapper{
  padding: 16px; 
  min-height: 100%; 
  height: 100%; 
  box-sizing: border-box;/*new*/
}
#tab-group{
  height: 100%;
}
#tab-group mat-tab-body {
  flex-grow: 1;
}

---

https://stackblitz.com/edit/angular-awamwn?file=src%2Fapp%2Fapp.component.html