According to the official provided examples:
<!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>
just use css as angular-material.css,but display wrong!
Make sure you are using the latest version as the docs only show the latest versions docs. So right now your probably seeing the docs for 0.6.0rc1 which has several beaking changes/renamings from 0.5.1 refer to the changelog for fixes.
If you want a full width header with a side menu and a footer here is the correct markup for 0.6.0rc1
This is just a basic layout you would probably replace the header with
md-tollbarand the sidemenu withmd-sidenav. But this should help you along.Also if you want to use 0.5.1 still just replace
rowwithhorizontalandcolumnwithvertical