CSS - 固定位置boke物化列

Question

我想使用Materialize为大屏幕和中屏幕创建一种sidenav菜单。

它很酷！

但事实是，如果屏幕，我希望我的Sidenac成为整个高度。我尝试过几件事。我发现了一个Soluce，在我的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并且我的身体正确地保持在我已经定义的列中？

Answer 1

为右侧部分添加此类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>

https://jsfiddle.net/qoxjb1yh/

CSS - 固定位置boke物化列

问题描述投票：0回答：1

1个回答

最新问题

CSS - 固定位置boke物化列

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1