html - 当视口(viewport)变小时，页脚容器会覆盖导航

Question

我在侧边栏上发现了这个错误。当我将浏览器调整得更小以测试侧边栏时，注销文本和图标会在导航上方移动。我在那里做错了什么？

这是一个带有侧边栏完整代码的jsfiddle。希望你能帮助我。谢谢。

jsfiddle

这是我的代码

.pulse-menu {
  background-color: #fafafa;
  width: 19.286em;
  position: fixed;
  z-index: 1050;
  top: 0;
  bottom: 0;
  height: 100%;
  text-transform: uppercase;
  overflow-y: scroll;
}
.menu-bg {
  width: 270px;
  height: 230px;
  background: url(../img/media/menu_bg.svg);
  background-size: 270px 221px;
  background-repeat: no-repeat;
}
.sidebar-profile {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 20px 0;
  color: #333;
  line-height: 0.6em;
}
.sidebar-profile img {
  border-radius: 100%;
  height: 60px;
  width: 60px;
}
.sidebar-profile h5 {
  padding-top: 0.50em;
  color: #a8a8a8;
  font-size: 1.02em;
}
.pulse-menu>nav ul {
  padding: 0;
  list-style-type: none;
}
.pulse-menu>nav>ul>li>a {
  color: #333;
  display: block;
  font-size: 1.02em;
  height: 40px;
  line-height: 0px;
  padding-bottom: 1.5em;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1.5em;
  text-align: center;
}
.sidebar-footer {
  height: 50px;
  position: absolute;
  width: 100%;
  bottom: 0;
  list-style-type: none;
  padding-bottom: 7.5em;
}
nav>.sidebar-footer>a,
nav>.sidebar-footer>a> h5 {
  color: #333;
  display: block;
  font-size: 1.02em;
  padding-bottom: 1.5em;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.5em;
  text-align: center;
}

<div class="pulse-menu">
  <div class="menu-bg clearfix">
    <div class="sidebar-profile">
      <img src="img/users/avatar.jpg" class="sidebar-img" alt="Candice Swanepoel" title="Candice Swanepoel" />
      <h5>Candice Swanepoel</h5>
    </div>
  </div>
  <nav>
    <ul>
      <li><a href="#">Dashboard</a>
      </li>
      <li><a href="#">Models</a>
      </li>
      <li><a href="#">Kunden</a>
      </li>
      <li><a href="#">Finanzen</a>
      </li>
      <li><a href="#">Mitarbeiter</a>
      </li>
      <li><a href="#">Einstellung</a>
      </li>
    </ul>
    <div class="sidebar-footer">
      <a href="#">
        <li><i class="icon-cloud-upload circle-icon"></i>
        </li>
        <h5>Logout</h5>
      </a>
    </div>
  </nav>

</div>

Answer 1

对小于 320 像素的屏幕使用媒体查询

@media only screen and (max-width: 320px) {}

在此媒体查询下对齐您的注销文本和图标