html - 侧边菜单遮挡页脚 CSS/HTML/JADE

Question

我正在使用此处的侧边菜单 http://bootsnipp.com/snippets/featured/admin-side-menu在我的 node.js 应用程序中( View 引擎:jade)——但这并不重要，因为您可以在此处简单地将代码从 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]

@编辑这是一个关于 fiddle 的例子: https://jsfiddle.net/c28n2dhj/

Answer 1

正如我所说，侧边菜单覆盖页脚的位置固定，而您注意到的顶部空间是由于缺少定义的 TOP 属性。这个空间= header height + header margin-bottom。

布局有些棘手，因为您需要页眉和页脚，而基本布局“管理侧菜单”不应该有。我建议以下 - 侧边菜单有 top:0;页眉/页脚有更大的 z-index，它们覆盖在这个侧边菜单上并且有非透明背景。然后我们将菜单项从顶部偏移 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)来移动侧边菜单中菜单项的顶部边距。

DEMO

DEMO w/Sticky footer

附言我没有看移动版本中究竟发生了什么，我相信在我的代码之前有一些困惑，菜单列表相互重叠。