Question

我构建了一个基本侧边栏，里面有导航列表。我尝试的是获取侧边栏底部的最后一个div容器.sidebar-footer。当我给班级一个绝对的位置时，它会覆盖在列表项目上，我应该怎样做才能在我们的设计图片中找到它？

<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">
            <li><a href="#"><i class="icon-cloud-upload circle-icon">        </i></a></li>
        </div>
    </nav>

</div>

的CSS：

.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;
}

这是working jsfiddle我的代码

Answer 1

为您的页脚提供此样式

.sidebar-footer{
height: 50px;
position: absolute;
width: 100%;
bottom: 0;
list-style-type: none;
padding-bottom:5.5em;
}

Answer 2

您可以在CSS中使用:last-child选择器。

HTML：

<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">
        <li><a href="#"><i class="icon-cloud-upload circle-icon">        </i></a></li>
    </div>
</nav>

CSS

.nav ul li:last-child {
   //your styling
  }

Answer 3

<强> CSS

<style>
.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;
}
.specialelement  {
    padding-top: 500px;
    display:block;
    padding-left:6em;
    list-style-type: none;
    color: #333;

}
</style>

<强> HTML

<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 class="specialelement">  

            <li><a href="#">Einstellung</a></li>
            </li>
            <div class="sidebar-footer">
            <li><a href="#"><i class="icon-cloud-upload circle-icon">        </i></a></li>
        </div>
    </nav>

</div>

Result

如何修复侧栏底部的最后一个div容器

3 个答案: