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

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

Answer 1

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