html - side - Base 5 altura completa de dispositivo off-canvas

off canvas menu examples

Question

Estoy usando la navegación fuera de lienzo de Foundation , intentando realizar una navegación que ocupe toda la altura del dispositivo.

De forma predeterminada, la altura de las opciones del menú está determinada por la altura del contenido que se muestra. Esto significa que si su contenido es menor que la altura de los elementos del menú, sus elementos del menú serán invisibles.

Me gustaría que tanto el menú como la altura de la sección de contenido se fijen a la altura del dispositivo. Con solo desplazarse en la sección de contenido si es necesario.

Establecer la altura y la altura mínima del área de contenido al 100% no parece tener ningún efecto, solo usar una altura fija, por ejemplo, 500 px cambiará la altura, pero esto no es escalable.

¿Cómo se logra esto?

Si le doy a ''.inner-wrap'' una altura fija, todo se ajustará. ¿Cómo puedo asegurarme de que .inner-wrap toma la altura completa de un dispositivo?

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

Answer 1

Esta es la mejor manera que he encontrado y es bastante simple y no hacker.
NOTA : esto solo funciona en algunos navegadores css3 . Navegadores compatibles

Versión Sass:

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

Versión CSS:

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

Editar:

Fundacion 6 sitios versión

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

Answer 2

Intenta si esto funciona, primero encierra <div class="off-canvas-wrap"> en otra div

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

Y luego establece el siguiente css,

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

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

Si desea bloquear el desplazamiento, por ejemplo, para un cliente de chat, establezca la altura de página en 100%. Y eso seria

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

Answer 3

Tuve los mismos problemas y esto es lo que he hecho:

Pongo .off-convas-wrapper, .inner-wrapper y aparte de mi contenido principal y solo uso .right (izquierda) -off-canvas-toggle dentro de mi cuerpo y mi problema se ha resuelto. De esta manera ya no necesito contenidos.

Por cierto, puse .exit-off-canvas al final de mi contenido principal antes de cerrar la etiqueta de envoltorio interno

Answer 4

Tuve que hackear el JS un poco, encontré que, dependiendo de cuándo el contenido es más alto que la altura del navegador / dispositivo o no empuja al 100% de altura, hubo problemas. Aquí está mi solución sugerida: https://github.com/zurb/foundation/issues/3800