我有一个angular4应用程序,我正在使用角度材料框架
https://material.angular.io/components/sidenav/examples.我想让md-sidenav-container拉伸整个div的高度,而不会掩盖标题.我附上了全屏指令,这导致sidenav填满屏幕的整个高度,从而掩盖了标题组件.这不是我想要的.图像显示了标题上方的sidenav伸展,以及它在标题处停止但未伸展到底部的另一次尝试.我希望它一直延伸到标题,一直到屏幕的底部.我该如何做到这一点？
谢谢！
谢谢！
HTML
<div class="bar">
<md-sidenav-container class="example-sidenav-fab-container">
<md-sidenav #sidenav mode="side" opened="true" align="end">
<!--<button md-mini-fab class="example-fab" (click)="sidenav.toggle()">-->
<!--<md-icon>add</md-icon>-->
<!--</button>-->
<div class="example-scrolling-content">
<ul>
<li>Recommendations</li>
<li>Events</li>
<li>Settings</li>
</ul>
</div>
</md-sidenav>
<button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
<md-icon>add</md-icon>
</button>
</md-sidenav-container>
</div>
CSS
md-sidenav-container :background-color white :float right :width 300px :height 400px md-sidenav :background-color $globati-light-blue //.example-sidenav-fab-container // width: 300px // height: 400px //border: 1px solid rgba(0,0.5) .example-sidenav-fab-container md-sidenav max-width: 300px .example-sidenav-fab-container md-sidenav display: flex overflow: visible .example-scrolling-content overflow: auto .example-fab position: absolute right: 20px bottom: 10px .bar :height 100%
解决方法
我发现这个解决方法适用于okHTML
<md-sidenav-container id="container" fullscreen >
CSS
#container {
top: 64px !important;
}
@media(max-width: 599px) {
#container {
top: 56px !important;
}
}
top必须与工具栏的高度相同.请记住,当宽度小于600px时,标准角度材质工具栏高度会变小.
