Question

我已经设置了一个类似于导航的代码。

<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

我需要滚动导航项，以便您可以访问列表中的所有项目。

图像可能会更小，因为这会在某些时候产生响应。

Answer 1

由于您在侧边栏上使用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

Answer 2

我可能已经修好了。 Check here

我所做的是与.user和.links-wrap div平分高度。我给了每个50％，尽管你可以把这个比例改成你最喜欢的。另外，我将.user div中的图像设置为高度：100％，因此它不会溢出到另一个div。

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

2 个答案: