可滚动侧边栏内的Flexbox粘性页脚

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>