Foundation 5 off-canvas full height of device

Question

I\'m using Foundation\'s off-canvas navigation, attempting to make a navigation that takes up the full height of the device.

By default, the height of the menu opti

Answer 1

Try if this works, first enclose the <div class="off-canvas-wrap"> in another div

<div class="page">
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
         [..]
        </div>
    </div>
</div>

And then set the following css,

body,html{
    height:100%;
    width:100%;
}

.off-canvas-wrap,.inner-wrap{
    height:100%;   
}

If you want to block scrolling, say for a chat client, set .page height to 100%. And that would be

body,html{
    height:100%;
    width:100%;
}
.off-canvas-wrap,.inner-wrap{
    height:100%;   
}
.page{
    height:100%;   
}

Answer 2

This is the best way I've found and its pretty simple and non-hackish
NOTE: this only works on some css3 browsers. Compatible Browsers

---

Sass Version:

.off-canvas-wrap {
  .inner-wrap{
    min-height: 100vh;
  }
}

---

CSS Version:

.off-canvas-wrap, .off-canvas-wrap > .inner-wrap {
  min-height: 100vh;
}

Edit:

---

Foundation 6 sites version

.off-canvas-wrapper-inner, .off-canvas{
  min-height: 100vh;
}

Answer 3

I had to hack the JS a bit, I found that depending on when the content is taller than the browser/device height or does not push to 100% height there were issues. Here’s my suggested fix: https://github.com/zurb/foundation/issues/3800

Answer 4

I had the same problems and this is what i've done:

i put .off-convas-wrapper , .inner-wrapper and aside out of my main content and just use .right(left)-off-canvas-toggle inside my body and my problem has solved. with this way i dont need contents anymore.

BTW i put .exit-off-canvas at the end of my main content befor closing inner-wrapper tag