Arthur Guiot Arthur Guiot - 1 month ago 8
Sass (Sass) Question

Menu that fill the entire page

I know it's probably the dumbest question on StackOverflow, but I have a problem with my menu. I want it to be 100% of the page's height, but it's only 100% of the window.

Here is my uncompiled Sass (Compile it yourself if you don't like Sass):

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


If you need more information (HTML code, etc...) see this link http://codepen.io/arguiot/pen/RGQkmg

Answer

It's due to your fixed header. Add its height (15vh) as a margin-top to the .navbar, and subtract that value from the all items margin-top inside the navbar to compensate that moving down.

.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

Here's an edited codepen: http://codepen.io/anon/pen/ORQKQm

Comments