Question

我有一个带有页脚的移动侧边栏，该页脚应粘贴在底部，但是当导航链接很多时，页脚将被向下推，您必须滚动才能看到它。

这是一个简化的演示，显示侧边栏已经扩展了内容。您会看到页脚粘在侧边栏的底部，而没有被多余的链接压下，滚动时它仍与链接重叠。

body {background: #CCC;}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #FFF;
  box-shadow: 0 0 20px #000;
  
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

#side-menu-header,
#side-menu-footer {
  flex-shrink: 0;
  background-color: skyblue;
  padding: 0.5rem;
}

#side-menu-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#side-menu-nav a {
  padding: 0.5rem;
}

<aside id="side-menu">
  <header id="side-menu-header">
    Logo
  </header>
  <nav id="side-menu-nav">
     <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
  </nav>
  <footer id="side-menu-footer">
    Footer
  </footer>
</aside>

<p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p>

我过去曾与flexbox合作，但在这里我无法弄清楚自己在做什么错。如何使页脚显示在导航链接下方？

Answer 1

您的#side-menu-nav还需要拥有flex-shrink: 0;，否则它将缩小以适应其父级。

堆栈片段

body {background: #CCC;}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #FFF;
  box-shadow: 0 0 20px #000;
  
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

#side-menu-header,
#side-menu-footer {
  flex-shrink: 0;
  background-color: skyblue;
  padding: 0.5rem;
}

#side-menu-nav {
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#side-menu-nav a {
  padding: 0.5rem;
}

<aside id="side-menu">
  <header id="side-menu-header">
    Logo
  </header>
  <nav id="side-menu-nav">
     <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
  </nav>
  <footer id="side-menu-footer">
    Footer
  </footer>
</aside>

<p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p>

Answer 2

据我了解，您希望侧边栏的页眉和页脚具有粘性。只需给您的#side-menu-nav一个overflow: auto或overflow-y: scroll，这样元素就可以放在页眉和页脚之间。

body {background: #CCC;}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #FFF;
  box-shadow: 0 0 20px #000;
  
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100vh;
}

#side-menu-header,
#side-menu-footer {
  flex-shrink: 0;
  background-color: skyblue;
  padding: 0.5rem;
}

#side-menu-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#side-menu-nav a {
  padding: 0.5rem;
}

<aside id="side-menu">
  <header id="side-menu-header">
    Logo
  </header>
  <nav id="side-menu-nav">
     <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
  </nav>
  <footer id="side-menu-footer">
    Footer
  </footer>
</aside>

<p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p><p>lots of content here oh yeah so much content!!!</p>

可滚动侧栏中的Flexbox粘贴页脚

2 个答案: