Wysokość 100% Off-Canvas Foundation 5

Question

Używam Foundation i mam serię sekcji na wysokości: 100%.

Używam menu poza obszarem płótna, ale jest ono zgodne tylko z wysokością pierwszej sekcji/rzutni. Dlatego po przewinięciu menu poza obszarem płótna nie jest już wyrównane do wysokości okienka ekranu. To jest podobny problem do Foundation 5 off-canvas full height of device.

Ja kończąc w ten sposób:

All good

After scrolling down to next section

Myślę, że może być rozwiązany przez dodaniem position: fixed w lewo-off-canvas-menu, ale to nie jest pracujący.

To doprowadza mnie do szału.

Answer 1

załóż poniższe linki w głowę.

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

Answer 2

Najlepszym rozwiązaniem mogę znaleźć tak daleko jest dodać kilka linii CSS:

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

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

Mimo to rozwiązuje go w przeważającej części, przewijanie na urządzeniu dotykowym nie jest w 100% perfekcyjne, od czasu do czasu dostajesz dziwny scenariusz, w którym dolna część przeglądarki przesuwa się w górę.

Answer 3

Kody umieszczone powyżej w moim komentarzu działają nieprawidłowo. Wystarczy umieścić niżej w swoim application.js

$(function() { 
     var timer; 

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

Answer 4

Oto lepsza odpowiedź: daje zarówno wysokości 100% i pozwala przewijać zawartość centrum do.

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