全角页眉菜单页脚无法正确显示使用角度材料

【问题标题】：Not displaying correctly by full-width-header-menu-footer use angular-material全角页眉菜单页脚无法正确显示使用角度材料
【发布时间】：2015-01-17 00:53:19
【问题描述】：

根据官方提供的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Full Width, Header, Menu, Footer</title>
    <link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
  </head>
  <body layout="column" layout-fill>
    <header>Header</header>
    <div flex layout="row" layout-phone="column">
      <aside flex-sm="33" flex-md="20">
        Menu <br>[flex-sm="33"][flex-md="20"]
      </aside>
      <main flex>Main [flex]</main>
    </div>
    <footer>Footer</footer>
  </body>
</html>

只使用css作为angular-material.css，但显示错误！

【问题讨论】：

标签： angularjs layout angularjs-material

【解决方案1】：

确保您使用的是最新版本，因为文档仅显示最新版本的文档。因此，现在您可能会看到 0.6.0rc1 的文档，其中有几个从 0.5.1 开始的变化/重命名，请参阅 changelog 进行修复。

如果你想要一个带有侧边菜单和页脚的全宽页眉，这里是 0.6.0rc1 的正确标记

<div layout="column" layout-fill>
    <div layout="row">
        <span>Your header</span>
    </div>
    <div layout="row" flex>
        <div layout="column" flex="33">
            Sidebar
        </div>
        <div flex="66">
            Main content
        </div>
    </div>
    <div layout="row">
        The footer!
    </div>
</div>

这只是一个基本布局，您可能会将标题替换为md-tollbar，将侧边菜单替换为md-sidenav。但这应该对您有所帮助。

此外，如果您想使用 0.5.1，仍然只需将 row 替换为 horizontal 并将 column 替换为 vertical

【讨论】：