100% Height Off-Canvas Foundation 5

Question

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.

score 22 · Answer 1 · answered Jan 06 '14 at 01:40

22

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.

answered Jan 06 '14 at 01:40

Matt Kennedy

415
3
9

3

Best solution I've found so far. Thanks. – francisco.preller Jan 14 '14 at 04:24
2

I've combined this answer with this article to create something that feels more natural on iOS devices http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ – Jason Sperske Sep 16 '14 at 23:41

score 3 · Answer 2 · answered Feb 26 '15 at 07:57

3

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

answered Feb 26 '15 at 07:57

PK.

2,471
3
24
30

2

This is the only solution on the whole wide Internet which seems to work. Kudos. – simonmorley Apr 16 '15 at 14:28

score 0 · Answer 3 · answered Jan 05 '14 at 04:11

0

put the below cords in your head.

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

answered Jan 05 '14 at 04:11

chegoon

49
1

score -1 · Answer 4 · answered Jan 07 '14 at 02:59

The codes attached above from my comment works something wrong. Just put the below in your application.js

   $(function() {
         var timer;

         $(window).resize(function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
               $('.inner-wrap').css("min-height", $(window).height() + "px" );
                }, 40);
          }).resize();
     });

100% Height Off-Canvas Foundation 5

4 Answers4

Linked