css - 填满整个页面的菜单

Question

我知道这可能是 StackOverflow 上最愚蠢的问题，但我的菜单有问题。我希望它是页面高度的 100%，但它只是窗口的 100%。

这是我未编译的Sass(不喜欢Sass的可以自己编译):

    .nav
      position: relative
      z-index: 0
      width: 20vw
      height: 100vh
      background-color: #EEEEEE

如果您需要更多信息(HTML 代码等...)，请参阅此链接 http://codepen.io/arguiot/pen/RGQkmg

Answer 1

这是由于您的固定 header 。将其高度 (15vh) 作为 margin-top 添加到 .navbar，并从所有元素 margin 中减去该值-top 在导航栏内以补偿向下移动。

.nav
  position: relative
  z-index: 0
  width: 20vw
  height: 100vh
  margin-top: 15vh
  background-color: #EEEEEE
.nav-title
  position: relative
  text-align: center
  font-size: 1.5em
  top: 5vh

.nav-content
  position: relative
  margin-top: 10vh
  text-align: center
  font-size: 1.5em

这是经过编辑的代码笔:http://codepen.io/anon/pen/ORQKQm