100% height for vertical sticky menu - doesn't work

Question

I'm trying to fit my sticky left menu to the height of my content, but I'm not be able to do it.

I try adding height: 100% to all parents div, but nothing happens

My code is: (before is and )

<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;
      }
    }
  }
}

For an element to be able to have `height: 100%`, it's parent needs to have a fixed size. Otherwise the browser has no idea how to calculate what 100% is of. — Jeremy Harris, Feb 04 '20 at 15:26

David Morris · Answer 1 · 2020-02-04T15:53:42.807

vh will solve your problem.

Instead of a pixel or percentage value. Use vh which stands for "viewport height".

An element with height: 100vh will be given a height the full height of the viewport.

.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;
      }
    }
  }
}

100% height for vertical sticky menu - doesn't work

1 Answers1