How to make dynamic height with Angular Material and responsive sidebar?


I followed this guide to create a responsive sidebar menu with Angular Material. Now I’m trying to make the content part of the screen render correctly with dynamic data. The content looks fine when rendering a static page. For example, here’s the welcome page:

welcome screen

However, when I have a list screen with dynamic data, I can’t scroll up to see the entire list. The list goes above the content section and overflows below it too.


I can fix this by changing the .content class from using height: calc(100vh - 98px) to height: auto, but then it causes regular screens to look funny because the content part doesn’t flow to the bottom.


The screen with the list looks a lot better though and you can scroll to see all its contents.


Is it possible to 1) make it so the height is dynamic and stretches to the bottom while allowing scroll-ability? Also, how do I make the static content render at the top instead of the vertical center?

You can see this issue in action by cloning this repo and running its Angular Material example:

git clone -b styles-support
cd demo-material
npm install
npm start


You can set a minimum height of the content div like this

min-height: calc(100vh - 98px);

This way and height to auto so it will expand and look proper

Answered By – Hitech Hitesh

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.