Angular Material Layout - 如何创建可滚动的部分

Posted 2023-02-22

【中文标题】Angular Material Layout - 如何创建可滚动的部分

【英文标题】：Angular Material Layout - How to create scrollable sections

【发布时间】：2016-04-08 07:17:06

【问题描述】：

我想尽可能只使用材料指令，而不是引入一些原始的 CSS 东西。

我尝试为占用整个视口的单页应用程序构建布局。 这是布局的粗略草图：

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

导航栏应保持固定高度，列表应可滚动。

不同的部分是作为角度指令（和模板）实现的组件。其中一个问题是，以这种方式编写应用程序似乎破坏了材料指令为我设置的布局 css。

任何帮助将不胜感激。

【问题讨论】：

<md-content> 创建可滚动部分，但您似乎在找人为您执行此操作....

我知道 md-content。阅读文档，但正如我所提到的，当您尝试将其与用户标签指令结合使用时，我遇到了问题。半天后，我更喜欢寻求帮助。谢谢。

【参考方案1】：

我最终设法使用workaround 解决了这个问题。似乎 md-content 在列布局中垂直拉伸存在问题。

另一个需要注意的重点是确保在相关层次结构中的所有元素上定义布局，从正文开始。

希望这对其他人也有帮助。