垂直粘性菜单的高度为100％-不起作用

Question

我正在尝试将粘性左菜单调整为内容的高度，但是我无法做到。

我尝试将height: 100%添加到所有父母div，但什么也没有发生

我的代码是：（在和之前）

<main>
  <div class="container">
    <div class="content-wrapper">
      <router-view />
    </div>
    <div class="navigation__menu">
      <div
        class="container-menu"
        :class="{'show': this.$store.getters.showSidebar}">
        <main-menu
          @click.native="showNav" />
        <menu-options />
      </div>
    </div>
  </div>
</main>

<template>
  <div id="main-menu">
    <div class="control">
      <i
        class="fas fa-angle-double-right" />
    </div>
  </div>
</template>

<template>
  <div id="menu-options">
    <div
      class="navigation-icons-menu">
      <a
        title="Home"
        href="/"><i class="fas fa-home" /></a>
      <a
        title="FIG"
        href="/fig-console"><i class="fas fa-clipboard-list" /></a>
      <a
        title="Service client"
        href="/"><i class="fas fa-users" /></a>
      <a
        title="Budget"
        href="/"><i class="fas fa-file-invoice" /></a>
      <a
        title="Contracting"
        href="/"><i class="fas fa-file-contract" /></a>
      <a
        title="Invoicing"
        href="/"><i class="fas fa-file-invoice-dollar" /></a>
      <a
        title="Administration"
        href="/"><i class="fas fa-cogs" /></a>
    </div>
    <div
      v-if="this.$store.getters.showSidebar"
      class="navigation-links-menu">
      <transition-group name="fade">
        <div
          v-show="this.$store.getters.showLink"
          key="1">
          <a
            title="Home"
            href="/">Home</a>
        </div>
        <div
          v-show="this.$store.getters.showLink"
          key="2">
          <a
            title="FIG"
            href="/fig-console">FIG</a>
        </div>
        <div
          v-show="this.$store.getters.showLink"
          key="3">Service client</div>
        <div
          v-show="this.$store.getters.showLink"
          key="4">Budget</div>
        <div
          v-show="this.$store.getters.showLink"
          key="5">Contracting</div>
        <div
          v-show="this.$store.getters.showLink"
          key="6">Invoicing</div>
        <div
          v-show="this.$store.getters.showLink"
          key="7">Administration</div>
      </transition-group>
    </div>
  </div>
</template>

.container-menu {
  position: absolute;
  top: 65px;
  padding-top: 10px;
  left: 0;
  width: 62px;
  min-height: 100%;
  height: 100%;
  background-color: $navy;
  border: solid $white;
  border-width: 0 1px 0 0;
  z-index: 1001;
  transition: all .5s ease-in-out;


  .control {
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 50px;
    margin-bottom: 10px;
    color: $white;
    i {
      font-size: 2rem;
      cursor: pointer;
      transition: all .5s ease-in-out;
    }
  }

  &.show {
    width: 170px;
    .control > i {
      color: $white;
      transform: rotateZ(-180deg);
    }
  }

  .navigation-icons-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    float: left;
    i {
      color: $white;
      font-size: 2rem;
      padding: 10px 0;
      cursor: pointer;
      transition: all .5s ease-in-out;
      &:hover {
        color: $white;
      }
    }
  }
  .navigation-links-menu {
    //padding:14px;
    float: left;
    color: $white;
    div {
      font-size: 1.35rem;
      padding: 10px;
      cursor: pointer;
      @include breakpoint-only(tablet) {
        font-size: 7px;
        padding: 10px 5px;
      }
      a {
        color: $white;
      }
    }
  }
}

Answer 1

vh将解决您的问题。

而不是像素或百分比值。使用vh代表“视口高度”。

具有height: 100vh的元素的高度将等于视口的整个高度。