2016-04-13 7 views
3
<nav class="offcanvas-menu"> 
    <div class="user-details"></div> 

    <ul class="test"> 
     <li>content</li> 
    </ul> 
    <div class=navfooter> 
     footer content 
    </div> 
</nav> 

サイドバーの下部に.navfooterを取得する方法がわかりません。それはいつも.testコンテナをunterします。これらは、それサイドバーの固定div要素を取得する

<style> 
    .test{ 
     left: 0; 
     top: 20%; 
     height: 400px; 
     width: 200px; 
     background: #ECF0F1; 
     -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40); 
     box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40); 
    } 

    .navfooter { 
     position: relative; 
     bottom: 0; 
     z-index: 999; 
     height: 64px; 
     width: 100%; 
     background: #1e67cb; 
     box-shadow: 0 -1px 5px rgba(0,0,0,.6); 
     -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6); 
    } 

.offcanvas-menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 1031; 
    /*visibility: hidden;*/ 
    background: #fff; 
    border-right: 1px solid #CCC; 
    width: 250px; 
    height: 100%; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 
</style> 
+0

質問**好ましく中[**スタックスニペット**](https://blog.stackoverflow.com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /)があります。 [**最小限で完全で検証可能なサンプルを作成する方法**](http://stackoverflow.com/help/mcve) –

+0

@Peymanいつも '.navfooter'を一番下にしたいのですか? –

答えて

2

のスタイルは、あなたが絶対に.navfooterを変更しようとしたことがあります

を私は物事のカップルをしようと試みたが、その仕事を得ていませんか?質問自体に**それを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求める

.navfooter { 
     position: absolute; 
     bottom: 0; 
     z-index: 999; 
     height: 64px; 
     width: 100%; 
     background: #1e67cb; 
     box-shadow: 0 -1px 5px rgba(0,0,0,.6); 
     -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6); 
    }