Foundation 5 Off-Canvas Full Height of Device

Foundation 5 off-canvas full height of device

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

Zurb Foundation 6 Increasing the size of offcanvas makes it visible while loading time

You just need to add the CSS for transitioning in all states. I think this is also what's causing the jump in view on page load too. I believe that adding this to your styles will work:

#off-canvas-right {
  &.off-canvas {
    width: 600px;
    transform: translateX(600px);
    &.is-open {
      transform: translate(0, 0);
    }
  }
}

Here's a link to a working CodePen

How to make Foundation 5 off-canvas navigation menu sticky?

Make the height of the content 95vh and the overflow-y=scroll. Whenever the content on the right is scrolled, the off-canvas menu is unaffected and remains at the top.

CSS:

.mycontent {     
  height:95vh;
  overflow-y:scroll;
  /* fix scrolling on webkit touch devices (iPhone etc) */
  -webkit-overflow-scrolling: touch; 
}

HTML:

  <div class="row mycontent" >
      <div class="large-12 columns">
          <h1>Welcome to Foundation</h1>
      </div>
  </div>

Zurb Foundation 5 offcanvas not working

Unfortunately, Ribena's answer is not working anymore, at version 5.2.3, though it was at version 5.0.3.

For it to work now, the trigger javascript needs to be put:

or at the end of the <body> tag as it said in the docs, like Daniel said
or inside the <head> this way (using JQuery):

<script> $(window).bind("load", function () { $(document).foundation(); }); </script>

Foundation - Off Canvas Scroll Issue

This is very popular Foundation issue:

http://foundation.zurb.com/forum/posts/965-fixed-menu-using-offcanvas

http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar

https://github.com/zurb/foundation/issues/3863

https://github.com/zurb/foundation/issues/3710

Despite of it seems that official solution doesn's exist yet I have found this one (reference) which looks like a nice fix of your problem.

HTML

<div class="off-canvas-wrap">
   <div class="inner-wrap">
      <div class="header">
         <nav class="tab-bar" data-offcanvas>
            <section class="left-small">
               <a class="left-off-canvas-toggle menu-icon">
                  <span></span>
               </a>
            </section>
            <section class="right tab-bar-section">
               <h1>Foundation 5 test</h1>
            </section>
         </nav>
      </div>
      <aside class="left-off-canvas-menu">
         <ul class="off-canvas-list">
            <li>
               <label>Foundation</label>
            </li>
            [...]
            <li><a href="#">The Psychohistorians</a>
            [...]
            </li>
         </ul>
      </aside>
      <article class="small-12 columns">
         <p>Content</p>
         <p>Content</p>
         <div data-magellan-expedition="fixed">
            <dl class="sub-nav panel">
               <dd data-magellan-arrival="build">
                  <a href="#build">Build with HTML</a>
               </dd>
               <dd data-magellan-arrival="js">
                  <a href="#js">Arrival 2</a>
               </dd>
            </dl>
         </div>
         [...]
         <p>Content</p>
         [...]
      </article>
      <a class="exit-off-canvas"></a>
      <footer class="small-12 columns">
         <div>...</div>
      </footer>
   </div>
</div>

CSS

article {
    overflow-y: auto;
}
article,
body,
html,
.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap,
.row {
    height: 100%;
    width: 100%;
}
.header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

Foundation 5 Off-Canvas Full Height of Device