Question

我目前正在网站的侧边栏上工作。该页面由3列不同宽度构成。在侧边栏底部的顶部和页脚链接上有导航链接。当内容长于窗口/视口时，侧边栏应该是可滚动的。如果max-height：600px，侧边栏中的页脚应该是静态位置，而不是底部绝对位置。所以这意味着侧边栏中应该有不同的滚动条，其余的2列（col2 + col3）。

然而，这是我面临的问题：侧边栏中的页脚没有显示

我发现了一个很好的演示，但我不知道它是如何完成的： https://colorlib.com/polygon/adminator/index.html

我的代码：https://codepen.io/rae0724/pen/rKyVMq

<nav class="navbar navbar-light bg-light navbar-expand-md fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNavAltMarkup" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
      </div>
    </div>
  </div>
</nav>


<div class="page-wrapper">

  <div class="col1">
    <div class="page-nav">
      <h2>Page Title</h2>
      <ul class="nav flex-column sidebar">
        <li><a class="nav-link active" href="#">Side Nav 1</a></li>
        <li><a class="nav-link" href="#">Side Nav 2</a></li>
        <li><a class="nav-link" href="#">Side Nav 3</a></li>
        <li><a class="nav-link" href="#">Side Nav 4</a></li>
        <li><a class="nav-link" href="#">Side Nav 5</a></li>
        <li><a class="nav-link" href="#">Side Nav 6</a></li>
      </ul>
      <ul class="nav flex-column footer">
        <li><a class="nav-link" href="#">Footer Link 1</a></li>
        <li><a class="nav-link" href="#">Footer Link 2</a></li>
        <li><a class="nav-link" href="#">Footer Link 3</a></li>
        <li class="nav-link">Copyright 2018.</li>
      </ul>
    </div>
  </div>

  <div class="col2">
    <div class="content-wrapper">
      <p>Paragraph 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Paragraph 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Paragraph 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Paragraph 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Paragraph 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="col3"></div>

</div>

.page-wrapper {
  width: 100%;
  margin-top: 5rem;
}

.col1 {
  height: 100%;
  position: fixed;
  width: 20vw;
  float: left;
  background: yellow;
}

.col2 {
  width: 50vw;
  float: left;
  margin-left: 20vw;
  background: orange;
}

.col3 {
  width: 30vw;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: blue;
}

.page-nav {
    position: -webkit-sticky;
    position: sticky;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.footer {
  position: absolute;
  bottom: 0;
  background: white;
}
.footer a {
  color: red;
}

@media (max-height:600px) {
  .footer {
    position: static;
    margin-top: 50px;
  }
}

当内容长于窗口高度时，侧边栏可滚动

0 个答案: