有什么方法可以让侧边导航成为粘性的，这样当侧边导航打开时，它会将页面内容推到右边，而不是像https://inbox.google.com/ 那样只是重叠它。 ？
这是 plunker link我的样本工作
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak ng-controller="AppCtrl">
<md-toolbar class="md-whiteframe-7dp" layout="row">
<md-button class="menu" ng-click="toggleSidenav();"><i class="material-icons">menu</i></md-button>
<h3>Hello Toolbar</h3>
</md-toolbar>
<md-content id="body-part" flex layout="row" layout-fill>
<md-sidenav md-disable-backdrop class="md-whiteframe-7dp" md-component-id="left-side-nav"
flex style="background: cyan">
<span>Hello Nav..!!</span>
</md-sidenav>
<div flex style="padding: 10px;overflow-y: scroll; background: darkcyan">
<span>Hello Content...!</span><br>
</div>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script src="js/script.js"></script>
</body>
</html>
最佳答案
添加mode="push"在你的<md-sidenav> .
<md-sidenav mode="push">
</md-sidenav>
关于html - 如何让 md-sidenav 将内容推送到右边而不是重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37732392/