可變高度容器內的垂直滾動導航

我已經安裝了一個看起來像我的導航的外觀。可變高度容器內的垂直滾動導航

<nav role='navigation'> 
    <div class="user"> 
    <img src="http://placehold.it/600x600"> 
    </div> 
    <div class="links-wrap"> 
     <ul class="links"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Clients</a></li> 
    </ul> 
    </div> 
</nav> 

body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 
nav { 
    background-color: tomato; 
    width: 300px; 
    height: 100%; 
    position: fixed; 
    .user { 
     img { 
     width: 100%; 
     } 
     } 
    .links-wrap { 
    height: 100%; 
    overflow: scroll; 
    } 
    ul.links { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     li { 
      height: 60px; 
      a { 
       display: block; 
       line-height: 60px; 
       vertical-align: middle; 
       padding-left: 40px; 
       box-sizing: border-box; 
       transition: all .3s ease; 
     color: white; 
     text-decoration: none; 
     fotn-family: sans-serif; 
       &:hover:not(.current) { 
      background-color: white; 
        padding-left: 45px; 
      color: tomato; 
       } 
      } 
     } 
    } 
}

http://codepen.io/anon/pen/bdooBw

我需要的導航項目滾動以便您可以訪問列表中的所有項目。

圖像可能會更小，因爲這會在某些時候響應。

來源

2015-06-19 Jordan

從看你的codepen項目滾動？除非我看錯了東西？ –

哦，我有我的codepen左側預覽設置。是的，當你縮小瀏覽器的高度時，它們會滾動，但不會滾動所有項目，還有一些你無法滾動到視圖中。 – Jordan

因爲您正在側邊欄上使用fixed定位，所以您無法將可滾動部分設置爲height: 100%。相反，您需要爲該部分和用戶部分設置高度。

喜歡的東西：Codepen

SCSS

.user { 
    height: 50%; 
    display: block; 
    overflow: hidden; 

    img { 
     width: 100%; 
    } 
} 

.links-wrap { 
    height: 50%; 
    overflow: scroll; 
}

其他注意事項：我還要考慮使用的background-image代替img標籤。然後，您可以使用background-size: cover，因此無論圖像的方向如何，它都可以垂直和水平覆蓋（不會傾斜圖像）。

這裏舉例：Using background image

來源

2015-06-19 15:32:52

我可能有固定的。 Check here。

我所做的就是與.user和.links-wrap div平分秋色。我給了每個50％，儘管你可以將這個比例改變爲你最喜歡的。此外，我將.user div中的圖像設置爲具有100％的高度，因此它不會溢出到其他div。

來源

2015-06-19 15:33:13 lucasnadalutti

可變高度容器內的垂直滾動導航

回答

相關問題