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 options are determined by the height of the content being shown. This means if your content is less than the height of the menu items, your menu items will be invisible.

I would like both the menu, and the height of the content section to be fixed at the height of the device. With only scrolling in the content section if needed.

Setting the height, and min-height of content area to 100% doesn't seem to have any effect - only using a fixed height e.g. 500px will change the height - but then this isn't scalable.

How is this achieved?

If I give '.inner-wrap' a fixed height, the whole thing will adjust. How can I make sure .inner-wrap takes the full height of a device?

<div class="off-canvas-wrap">

  <div class="inner-wrap">

    <nav class="tab-bar">

      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

   </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Label</label></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>

      </ul>
    </aside>

    <section class="main-section">
        <div class="section-inner">
        <p>blah blah</p>
        <p>test</p>
        </div>
    </section>

  <a class="exit-off-canvas"></a>

  </div>

</div>

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