可变高度容器内的垂直滚动导航

我已经安装了一个看起来像我的导航的外观。可变高度容器内的垂直滚动导航

<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

可变高度容器内的垂直滚动导航

回答

相关问题