100% Height Off-Canvas Foundation 5

css, html, zurb-foundation

Solution

The best option I can find so far is to add a couple of lines of css:

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

        .off-canvas-wrap{  
        height: 100%;
        overflow-y: auto;
        }

Although this fixes it for the most part, scrolling on a touch device is not 100% perfect, every now and then you do get a weird scenario where the bottom of the browser drags upwards.

Problem

I'm using Foundation and have a series of sections at height: 100%. I'm using the off-canvas menu but it's only matching the height of the first section / the viewport. So once I scroll, the off-canvas menu is no longer aligned to the height of the viewport. It's a similar issue to Foundation 5 off-canvas full height of device. I'm ending up with this: All good After scrolling down to next section I think it can be solved by to adding position: fixed to left-off-canvas-menu, but that's not working. It's driving me mad.

Original source

Related problems