Question

我在我的node.js应用程序（查看引擎：jade）中使用此处http://bootsnipp.com/snippets/featured/admin-side-menu的侧边菜单 - 但它并不重要，因为您可以在此处将代码从html转换为jade http://html2jade.org/

乍一看它看起来很好：

但是如果你向下滚动，那么我们就会遇到问题，因为侧面菜单会遮挡页脚，你可以在下面看到：菜单上方还有空白区域，但最重要的问题是页脚。我怎么解决这个问题？例如，这里http://bootsnipp.com/snippets/featured/admin-side-menu侧边菜单是框架式的，所以也许这是一个很好的解决方案，但我不知道如何在我的情况下做同样的事情。

顺便说一下，这就像我的观点：

extends layout //default layout with header and footer

block content
    .row
      .side-menu
        nav.navbar.navbar-default(role='navigation')
          .navbar-header
[... the rest of the code]

@EDIT 这是一个关于小提琴的例子： https://jsfiddle.net/c28n2dhj/

Answer 1

正如我所说，侧边菜单的位置固定覆盖了页脚，而您注意到的顶部空间是由于缺少已定义的TOP属性。此空格=标题高度+标题边距底部。

布局有点棘手，因为你需要页眉和页脚，其中基本布局“管理员侧菜单”不应该有。我建议以下 - 侧面菜单有顶部：0;和页眉/页脚有更大的z索引，它们覆盖此侧面菜单并具有非透明背景。然后我们使用margin-top从顶部偏移菜单项：52px（标题的高度）

        .side-menu {
            top:0;
        }

        .navbar.navbar-top {
          position:relative;
            z-index: 10;
          margin-bottom:0 !important;
        }


        .side-menu .navbar {
          margin-top:52px;
        }

        .side-menu.affix .navbar {
          margin-top:0;
        }

        .footer-container {
          position:relative;
          z-index:10;
          background:#ffffff;
        }

为了在滚动时让顶层菜单项更接近窗口顶部，我们可以使用Bootstrap中的Affix组件（其类别为.affix）来移动侧边菜单中菜单项的margin-top。 / p>

<强> DEMO

<强> DEMO w/Sticky footer

P.S。我没看到移动版本中究竟发生了什么，我相信在我的代码与菜单lis相互重叠之前有些混乱。

Answer 2

您是否尝试过添加

.navbar尺在.navar-header
之后

我认为应该解决问题

侧面菜单模糊了页脚CSS / HTML / JADE

2 个答案: