100% Höhe Off-Canvas Foundation 5

Question

Ich benutze Foundation und habe eine Reihe von Abschnitten in der Höhe: 100%.

Ich bin mit dem Off-Leinwand-Menü, aber es ist nur die Höhe des ersten Abschnitts/Ansichtsfensters entspricht. Sobald ich scrollte, ist das Off-Canvas-Menü nicht mehr auf die Höhe des Ansichtsfensters ausgerichtet.

Es ist ein ähnliches Problem Foundation 5 off-canvas full height of device.

Ich bin mit der Endung auf den Punkt:

All good

After scrolling down to next section

ich denke, es kann durch das Hinzufügen Position gelöst werden: fixiert links-off-Leinwand-Menü, aber das ist nicht Arbeiten.

Es macht mich verrückt.

Answer 1

legen Sie die unten Schnüre in Ihrem Kopf.

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

Answer 2

Die beste Option, die ich bisher finden kann, ist ein paar Zeilen CSS hinzuzufügen:

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

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

Obwohl dies es zum größten Teil fixiert, auf einem Touch-Gerät Scrollen ist nicht 100% Perfekt, hin und wieder bekommen Sie ein komisches Szenario, wo der untere Teil des Browsers nach oben zieht.

Answer 3

Der oben aus meinem Kommentar angebracht Codes funktioniert etwas nicht stimmt. setzen Nur die unten in Ihrem 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

Hier ist die bessere Antwort: es gibt sowohl 100% Höhe und ermöglicht es dem Zentrum Inhalt zu blättern.

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