如何修復側欄底部的最後一個div容器

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