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.
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.
Here's the better answer: it gives both 100% height and allows the center content to scroll.
.off-canvas-wrap, .inner-wrap, .main-section { height:100%; }
.main-section { overflow-y: auto; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With