我想使用 Materialize 为大屏幕和中屏幕创建一种侧边导航菜单。
我使用了 Materialize doc 中给出的示例.
很酷!
但事实是，我希望我的 Sidenav 是屏幕的整个高度。我已经尝试了几件事。我找到了一个来源，在我的 CSS 中使用 Fixed:position;，它将 sidenav 放在整个高度上，但它破坏了 Materialize Columns 系统。
如果我删除了 fixed:position 我会得到这样的结果:
我身上有这个:
<body>
<nav>
<!-- Top Navabar -->
</nav>
<div class="row">
<div class="col s12 m4 l2 red" id="sidenav">
<ul class="menu">
<!--Sidenav content-->
</ul>
</div>
<div class="col s12 m8 l10">
<div class="row">
<div class="col s12 m12 l12">
<!-- Body Content-->
</div>
</div>
</div>
我的 CSS 看起来像这样:
#sidenav{
min-height: 100%;
position: fixed;
z-index: 999;
background-size: 100%;
}
您可以在此处获得完整的代码示例:https://jsfiddle.net/pq19g3t2/
那么我怎样才能让我的 sidenav 位于屏幕的整个高度上，而我的 body 如何正确地停留在我用 materialize 定义的列内呢？
最佳答案
为右侧部分添加此类 push-m4 push-l2
更改一些 css 宽度媒体查询，例如
#sidenav{
background-size: 100%;
}
@media(min-width:601px){
#sidenav{
min-height: 100%;
position: fixed;
z-index: 999;
}
}
<div class="col s12 m8 l10 push-m4 push-l2">
<div class="row">
<div class="col s12 m12 l12">
<!-- Body Content-->
</div>
</div>
关于html - CSS - 固定位置破坏了 Materialise 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55632278/