角度材料布局-如何创建可滚动的部分

Question

I would like to use only material directives as much as possible instead of introducing some raw CSS stuff.

I try to build a layout for one-page application that takes up the whole view port. This is a rough sketch of the layout:

+-------------------------------+
| Toolbar                       |
|----------+--------------------|
| Nav-Bar  | +----------------+ |
| +------+ | |                | |
| | List | | |                | |
| |      | | | un-scrollable  | |
| |      | | |     content    | |
| +------+ | | (fills         | |
| +------+ | | available area)| |
| | List | | |                | |
| |      | | |                | |
| +------+ | +----------------+ |
+----------+--------------------+

The navigation bar should remain with fixed height, and the lists should be scrollable.

The different sections are components implemented as angular directives (and templates). One of the issues is that composing the app in this way seems to break the layout css set by material's directives for me.

Any help will be greatly appreciated.

Answer 1

I managed eventually to solve this using this workaround . It seems that md-content has issues with being stretched vertically in a column layout.

Another important point to notice is to make sure to define a layout on all the elements in the relevant hierarchy starting from body.

Hope this helps someone else too.