Html 如何使md sidenav将内容推到右侧而不是重叠？_Html_Css_Angular Material

Html 如何使md sidenav将内容推到右侧而不是重叠？

html css angular-material

Html 如何使md sidenav将内容推到右侧而不是重叠？,html,css,angular-material,Html,Css,Angular Material,我有没有办法让侧导航保持粘性，这样当侧导航打开时，它会将页面内容向右推，而不是像这样重叠这是我的样本工作的结果 <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet"

我有没有办法让侧导航保持粘性，这样当侧导航打开时，它会将页面内容向右推，而不是像这样重叠

这是我的样本工作的结果

<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>


菜单
你好工具栏
你好，导航。。！！
你好，内容

您需要为sidenav css样式添加一个相对位置：

从你的宝物：

md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 50vw !important;
    max-width: 200px !important;
    position:relative;
}

您需要为sidenav css样式添加一个相对位置：

从你的宝物：

md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 50vw !important;
    max-width: 200px !important;
    position:relative;
}

将绝对位置更改为静态位置

.md-sidenav {position: static;}

将绝对位置更改为静态

.md-sidenav {position: static;}

这件事曾引起过争论。Angular Material网站示例使用

$mdSidenav（'left'）.toggle（）

var-app=angular.module（'myApp'，['ngMaterial']）；
app.controller（'MyController'，函数（$scope，$mdSidenav）{
$scope.openLeftMenu=函数（）{
$mdSidenav（'left'）.toggle（）；
};
});Faugh将此问题处理一次。Angular Material网站示例使用$mdSidenav（'left'）.toggle（）

var-app=angular.module（'myApp'，['ngMaterial']）；
app.controller（'MyController'，函数（$scope，$mdSidenav）{
$scope.openLeftMenu=函数（）{
$mdSidenav（'left'）.toggle（）；
};
});
在
中添加mode=“push”



请参阅：
在
中添加mode=“push”



请参阅：
是否有一种唯物主义的方法？你给出的解决方案是可行的，但部门只是简单地抓住了新的位置，而不是过渡。有没有一种唯物主义的方法？您给出的解决方案是可行的，但是div只是简单地捕捉到新的位置，而不是转换。答案正如预期的那样有效。但是sidenav旁边的div没有转换。我希望这一页是实质性的答案工程如预期。但是sidenav旁边的div没有转换。我希望页面是实质性的如果你能找到一种方法来明确声明内容div
的width
值，并在更改时进行相应调整，你应该能够通过你的常规转换
规则获得平滑的转换效果。您需要javascript来检测宽度的变化，并相应地更新内联样式。如果您可以找到一种方法来显式声明内容div
的width
值，并根据变化进行相应调整，您应该能够通过常规的transition
规则获得平滑的过渡效果。您需要javascript来检测宽度的变化并相应地更新内联样式他要求的是MaterialJS的解决方案，而不是Material2；）