根据官方提供的示例：
<!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，但显示错误！
请确保您使用的是最新版本，因为文档仅显示最新版本的文档。因此，现在您可能会看到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