Высота 100% для вертикального липкого меню - не работает - PullRequest
Новая
       21

Высота 100% для вертикального липкого меню - не работает

0 голосов
/ 04 февраля 2020

Я пытаюсь подогнать мое липкое левое меню к размеру моего контента, но я не могу этого сделать.

ver

Я пытаюсь добавить 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;
      }
    }
  }
}

1 Ответ

2 голосов
/ 04 февраля 2020

vh решит вашу проблему.

Вместо значения в пикселях или процентах. Используйте vh, что означает «высота области просмотра».

Элементу с height: 100vh будет присвоена высота, равная полной высоте области просмотра. 

.container-menu {
  position: absolute;
  top: 65px;
  padding-top: 10px;
  left: 0;
  width: 62px;
  height: 100vh;
  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;
      }
    }
  }
}
...