2016-04-13 24 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> 

Kenar çubuğunun altındaki .navfooter'ı nasıl elde edeceğinizi bilmiyorum. her zaman .test konteynır. benKenar çubuğuna sabit div öğesi alın

<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

Sorular ** tercihen bir [** Stack Parçacığı **] (https://blog.stackoverflow.com/2014/09/sokulması-çalıştırılabilir-javaScript-css-ve-html kod parçacıkları /). [** Minimal, Tam ve Doğrulanabilir bir örnek nasıl oluşturulur **] (http://stackoverflow.com/help/mcve) –

+0

@Peyman '.navfooter' her zaman en altta olmasını ister misiniz? –

cevap

2

mutlak için .navfooter değişen denediniz için bu stilleri

şeylerin çift ama onun almıyorum çalışmalarını uğraş? Söz kendisinde ** bunu çoğaltmak için gerekli en kısa kodu içermelidir kod yardım arayan

.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); 
    } 
İlgili konular