Foundation 5 - div fill height

Question

I am trying to fill my sidebar div so the blue background fills the screen. Foundation makes this slightly tricky (I have tried height:100%;)

<ul class="side-nav" link="white">
<li class="active"><a href="#">

Answer 1

I can think of three different ways to achieve this.

Set the height of the parent elements ( body / html ) to 100% . In doing so, you can set the child's height to 100% .
```
 html, body, .side-nav { height: 100%; } 
```
Use viewport percentage lengths . In this case you would use 100vh .
```
 .side-nav { height: 100vh; } 
```
Absolutely position the element and specify a top / bottom value of 0 .
```
 .side-nav { position: absolute; top: 0; bottom: 0; } 
```
If that doesn't work, you would have to try fixed positioning. (It's worth pointing out that fixed positioning is relative to the window, whereas absolute positioning is relative to the closest non- static ly positioned parent element.)