web-dev-qa-db-fra.com

Fondation 5 hors toile pleine hauteur de l'appareil

J'utilise la navigation hors-toile de Foundation , en essayant de faire une navigation qui occupe toute la hauteur de l'appareil. 

Par défaut, la hauteur des options de menu est déterminée par la hauteur du contenu affiché. Cela signifie que si votre contenu est inférieur à la hauteur des éléments de menu, ceux-ci seront invisibles.

Je voudrais que le menu et la hauteur de la section de contenu soient fixés à la hauteur de l'appareil. Avec seulement le défilement dans la section de contenu si nécessaire.

Le réglage de la hauteur et de la hauteur minimale de la zone de contenu sur 100% ne semble pas avoir d’effet - vous n’utilisez qu’une hauteur fixe, par exemple. 500px changera la hauteur - mais ce n'est pas évolutif.

Comment cela est-il réalisé?

Si je donne '.inner-wrap' à une hauteur fixe, le tout s'ajustera. Comment puis-je m'assurer que .inner-wrap occupe toute la hauteur d'un appareil? 

<div class="off-canvas-wrap">

  <div class="inner-wrap">

    <nav class="tab-bar">

      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

   </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Label</label></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>

      </ul>
    </aside>

    <section class="main-section">
        <div class="section-inner">
        <p>blah blah</p>
        <p>test</p>
        </div>
    </section>

  <a class="exit-off-canvas"></a>

  </div>

</div>
htmlcsszurb-foundation
26
willdanceforfun

Essayez si cela fonctionne, commencez par inclure le <div class="off-canvas-wrap"> dans un autre div

<div class="page">
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
         [..]
        </div>
    </div>
</div>

Et puis définissez le css suivant,

body,html{
    height:100%;
    width:100%;
}

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

Si vous souhaitez bloquer le défilement, par exemple pour un client de discussion, définissez .page height sur 100%. Et ce serait

body,html{
    height:100%;
    width:100%;
}
.off-canvas-wrap,.inner-wrap{
    height:100%;   
}
.page{
    height:100%;   
}
31
Manu

C’est le meilleur moyen que j’ai trouvé et c’est assez simple et non hackais
NOTE: cela ne fonctionne que sur les navigateurs certains css3. Navigateurs compatibles

Sass Version:

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

Version CSS:

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

Modifier:

Version Foundation 6 sites

.off-canvas-wrapper-inner, .off-canvas{
  min-height: 100vh;
}
19
James Harrington

J'ai eu les mêmes problèmes et voici ce que j'ai fait:

je mets .off-convas-wrapper, .inner-wrapper et en dehors de mon contenu principal et utilise simplement .right (à gauche) -off-canvas-toggle dans mon corps et mon problème est résolu . de cette façon i plus besoin de contenu.

BTW j'ai mis .exit-off-canvas à la fin de mon contenu principal avant la fermeture de la balise inner-wrapper

1
ehsan

Je devais pirater le JS un peu, j'ai trouvé que cela dépendait du moment où le contenu était plus grand que la hauteur du navigateur/de l'appareil ou ne poussait pas à 100% de la hauteur. Voici ma solution suggérée: https://github.com/zurb/foundation/issues/3800

0
Larron