如何在sidenav materializecss上添加保证金底部？

Question

我想在大型设备上的sidenav上添加保证金底部50px。但是没有用。

这是我的css：

ul.side-nav,side-nav{
   margin-bottom:50px!important;
}

我的HTML：

<ul id="slide-out" class="side-nav">
<li><div class="userView">
  <div class="background">
    <img src="images/office.jpg">
  </div>
  <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
  <a href="#!name"><span class="white-text name">John Doe</span></a>
  <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>

Answer 1

如果你想在侧面导航下有一些差距，可以改变它的高度 css应该是

side-nav{
   height:70%;
}

在给定的示例中，

高度为100％。因此它将覆盖所有屏幕。这就是为什么你看不到保证金。

Answer 2

您可以通过以下方式解决问题：

side-nav{
     height: calc(100% - 115px) !important;
}